Support » Themes and Templates » Theme: twenty eleven adding dynamic css background

  • Hi There,
    I’m trying to set up a dynamic css background on a twenty eleven theme but I am not sure where to insert the three divs that the background requires.

    The html code is:

    <div id="layer-1"></div>
    
    <div id="layer-2"></div>
    
    <div id="layer-3"></div>

    This code is currently inserted directly after the <body <?php body_class(); ?>>‘tag in headed.php of my child theme

    and the css is:

    #layer-1
    {
    width: 100%;
    height: 1000px;
    background: url('images/layer-3.jpg') repeat-x;
    background-position: -70%;
    }
    
    #layer-2
    {
    width: 100%;
    height: 1000px;
    background: url('images/layer-2.png') repeat-x;
    background-position: -20%;
    position: absolute;
    top: 0px;
    }
    
    #layer-3
    {
    width: 100%;
    height: 1000px;
    background: url('images/layer-1.png') repeat-x;
    position: absolute;
    top: 0px;
    }
    
    body {
    	background: none;
    }

    I have a test site set up at:
    http://fluffywhitecloud.kamuata.com/
    You can see that the background is working but it is occurring before the main body of the site rather than beneath it.

    I’m not sure if the solution is in the css (z-index perhaps?) of if it is an html or .php thing.

    Any suggestions or advice would be great. I’m a bit of a noob I’m afraid.

    Thanks.

    C.

  • The topic ‘Theme: twenty eleven adding dynamic css background’ is closed to new replies.