Support » Themes and Templates » how do I add a second background?

Viewing 8 replies - 1 through 8 (of 8 total)
  • add the background to the body style in style.css:

    body {
    	font-family: 'Georgia', 'Helvetica Neue', Arial , Georgia, Arial;
    	line-height:2.00;
    	font-size: 12px;
            color: #00000
    
    }

    http://www.w3schools.com/css/css_background.asp

    to give you an idea on how to integrate a background style, look at the existing background (wood) within the style of #wrapper:

    #wrapper{width:1024px;
    margin:0 auto;
    background:url('style/images/Wood-background.gif') repeat-y; }
    Thread Starter revol85

    (@revol85)

    if i do that it just replaces the wood background.

    where do i place it so it runs behind the wood background?

    you would add the background declaration to the body style.

    Thread Starter revol85

    (@revol85)

    yes i did try that but saw no changes.

    so perhaps you would be kind enough to tell me the code to put in the body style as i used:

    #wrapper{width:1024px;
    margin:0 auto;
    background:url(‘style/images/carpet.jpg’) repeat-y;

    and got no difference.

    you have changed the #wrapper style – you would need to change the body style:

    body {
    	font-family: 'Georgia', 'Helvetica Neue', Arial , Georgia, Arial;
    	line-height:2.00;
    	font-size: 12px;
            color: #00000
    background:url('style/images/carpet.jpg') repeat-y;
    }
    Thread Starter revol85

    (@revol85)

    that causes the wood background to diappear and shifts everything else up.

    the body style should actually not influence the #wraper style.
    however, i forgot to add a semicolon after ‘color: #00000’ – this could upset the style a bit.

    corrected, this is how the whole area in style.css could look like:
    (so you can see the body style and #wrapper style on one piece of code)

    /* general style */
    body {
    	font-family: 'Georgia', 'Helvetica Neue', Arial , Georgia, Arial;
    	line-height:2.00;
    	font-size: 12px;
            color: #00000;
    background: url('style/images/carpet.jpg');
    }
    
    .clear{clear:both;}
    
    #wrapper{width:1024px;
    margin:0 auto;
    background:url('style/images/Wood-background.gif') repeat-y; }

    this is assuming that your ‘carpet.jpg’ can be found here:
    http://itsaneraser.com/blog/wp-content/themes/teacher/style/images/carpet.jpg

    if it is anywhere else, you need to adjust the url in the background declaration.

    Thread Starter revol85

    (@revol85)

    Finally got it.

    Thank you very much.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘how do I add a second background?’ is closed to new replies.