WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] how do I add a second background? (9 posts)

  1. revol85
    Member
    Posted 3 years ago #

    I want to add a second background to my wordpress blog:

    http://itsaneraser.com/blog

    I want the second background image to fill the white spaces on the sides so it would sit behind the existing background.

    How can I do this?

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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; }
  3. revol85
    Member
    Posted 3 years ago #

    if i do that it just replaces the wood background.

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

  4. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    you would add the background declaration to the body style.

  5. revol85
    Member
    Posted 3 years ago #

    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.

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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;
    }
  7. revol85
    Member
    Posted 3 years ago #

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

  8. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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.

  9. revol85
    Member
    Posted 3 years ago #

    Finally got it.

    Thank you very much.

Topic Closed

This topic has been closed to new replies.

About this Topic