Background Image appears over side bar

  • Author
    Posts
  • #682831

    realagenda
    Member

    I would like to set up a background on my website that is not a color background, but an image. I tried several images and finally chose one. Unfortunately, the background appears on the right side bar as well in addition to the back ground. Is there a way to prevent the right side bar from “absorbing” the background image so that it only appears in the background area?

    Thanks!
    Blog url: http://realagenda.wordpress.com/

    #683111

    macmanx
    Staff

    Are you referring to the black shadowed boarder? If so, that can’t be changed, but you can improve the situation be either displaying less in your sidebar, or more posts than the length of your sidebar.

    #683146

    realagenda
    Member

    No. I am saying I wanted my website’s background to be an image or a dark color instead of white, but whenever I change the background color to a dark color or an image, that background color or image also affects the right sidebar instead of only affecting the actual background of the site, the part behind the HEADER and the MAIN sections of the site.

    #683151

    macmanx
    Staff

    Ah, I see what you mean. That’s actually a “feature” of the theme. If you had a Custom Design upgrade, you could modify the CSS to control how the background spreads.

    #683152

    realagenda
    Member

    I do have the custom CSS upgrade. Could you please explain how to modify it so that the background does not appear over the right side bar?

    #683154

    macmanx
    Staff

    I’d start by applying the background to the #content element, us background inclusion from other elements as an example to build towards exactly what you want.

    The key is to only apply the background to the desired section.

    #683159

    realagenda
    Member

    I applied the following two codes to the site:

    #content {
    background:url(‘http://realagenda.files.wordpress.com/2011/08/news-background-tall.jpg’)
    }

    #container {
    background:url(‘http://realagenda.files.wordpress.com/2011/08/news-background-tall.jpg’)
    }

    but neither worked. Both place the background image but in both cases the image affects the right sidebar as well.

    #683160

    evarlese
    Staff

    Hi there,

    Could you try the inserting the following into your Custom CSS page?

    #container {
    background:url(‘http://realagenda.files.wordpress.com/2011/08/news-background-tall.jpg’)
    }

    #content {
    background: #ffffff;
    }

    #683161

    realagenda
    Member

    Hi!

    Thanks for the help. The code did help because it did not affect the right sidebar, but it made the header image disappear. After I applied the code, the header does not show.

    #683166

    evarlese
    Staff

    Hi there,

    Can you try adding this as well?

    #header {
    background: url(“http://realagenda.files.wordpress.com/2011/08/header1.gif”) no-repeat #ffffff;
    }

    #683167

    realagenda
    Member

    It worked! Thanks!

The topic ‘Background Image appears over side bar’ is closed to new replies.