Changing the Background – Liquorice

• 

  worldofhannah · Member · Feb 27, 2013 at 9:05 pm

  • Copy link
  • Add topic to favorites

  I want to switch my theme from Bueno to Liquorice so I can change up the design a little bit, but before I completely change everything I want to make sure I can get it to look right.

  I’ve been trying to figure out if it’s possible to change the background on the different pages (for instance: the home page having a different background image than the rest of the pages.).

  I have tried using this code:

  .page-id-30 #background {
background: url("http://worldofhannah.files.wordpress.com/2012/04/laurels3.jpg")
}

  but it doesn’t change anything. Does anyone have any suggestions?

  Thanks in advance!

  -Hannah Victoria
  http://www.worldofhannah.com

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Feb 28, 2013 at 8:51 pm

  • Copy link

  You’re close! The “#background” part of the selector in your example isn’t quite right. The “.page-id-30” part is good as long as it matches the page you want to target (look at the body tag in the page source to make sure).

  Normally, you can just set a new background on the body tag itself. There’s another twist in this case though. If you have used the Appearance → Background page to setup a background image, some CSS gets added that’s a bit more specific than normal:

  body.custom-background {
  	background-image: url('http://worldofhannah.files.wordpress.com/2011/12/white_vintage_wallpaper_low_res.jpg');
  }

  The “.custom-background” part of that is what makes it more specific. So, to override a selector like “body.custom-background” you need to use an even more specific rule than that one. You can do it by specifying a CSS selector has to have BOTH the “page-id-30” class AND the “custom-background” tag to work by sticking them side-by-side with no spaces. It’s a little unusual! Here’s an example you can try out:

  .page-id-30.custom-background {
  	background-image: url('http://worldofhannah.files.wordpress.com/2012/04/laurels3.jpg');
  }

  The image you’ve referenced is a bit too small to work as a background image, so make sure you use one that is properly sized when you try out the example again.

• 

  worldofhannah · Member · Feb 28, 2013 at 8:53 pm

  • Copy link

  Thank you so much!

• 

  designsimply · Member · Feb 28, 2013 at 8:56 pm

  • Copy link

  You’re welcome. :)