Background Image appears over side bar

• 

  realagenda · Member · Aug 17, 2011 at 6:58 pm

  • Copy link
  • Add topic to favorites

  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/

• 

  staff-blorbo · Staff · Aug 18, 2011 at 6:45 pm

  • Copy link

  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.

• 

  realagenda · Member · Aug 21, 2011 at 3:58 pm

  • Copy link

  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.

• 

  staff-blorbo · Staff · Aug 22, 2011 at 7:31 pm

  • Copy link

  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.

• 

  realagenda · Member · Aug 23, 2011 at 1:26 am

  • Copy link

  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?

• 

  staff-blorbo · Staff · Aug 23, 2011 at 6:33 pm

  • Copy link

  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.

• 

  realagenda · Member · Aug 25, 2011 at 1:56 am

  • Copy link

  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.

• 

  evarlese · Member · Aug 25, 2011 at 9:03 pm

  • Copy link

  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;
  }

• 

  realagenda · Member · Aug 26, 2011 at 1:36 am

  • Copy link

  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.

• 

  evarlese · Member · Aug 26, 2011 at 8:51 pm

  • Copy link

  Hi there,

  Can you try adding this as well?

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

• 

  realagenda · Member · Aug 27, 2011 at 3:11 pm

  • Copy link

  It worked! Thanks!