[hipandhealthykids]

Hello,

I created a background image which I uploaded and it is looking good on the homepage coupled with the slider (test site: http://www.hipandhealthykid.com).

When I click to an article/page, (basically anything but the homepage), since the featured slider is no longer active, the background image shrinks in height understandably. In doing so though, the bottom color of the image eats up the logo. Is there a way to make all the pages, except the homepage possibly read off another background file? I can then modify the file to fit that space.

Thank you!

[Sakin]

@hipandhealthykids: You just need to add extra class .home. See the following CSS.
.home #header { background-image: url("/wp-content/uploads/2014/HHKWallpaper.png"); }

[hipandhealthykids]

Hi Sakin,

Thank you. When I add that code, it removes the header image in total. Here’s the code I’m using, let me know if I’m interpreting this the right way…

The first code set should be the background image that is on all the other pages. The second code set that you provided should allow me to make the homepage background read off a separate file. Is that right? Not sure why the background is removed completely? (p.s. I just added the left bottom repeat code in case the image isn’t sized right. I tried without this addition as well and background was still removed.)

#header {background:url(/wp-content/uploads/2014/HHKWallpaperOtherPages.png) left bottom repeat-x;}
.home #header {background-image:url(/wp-content/uploads/2014/HHKWallpaper.png) left bottom repeat-x;}

Thanks for your speedy help!

[Sakin]

@hipandhealthykids: background-image css will not take other properties, only background will take all the other properties.

Also about the images, your site couldn’t fine one image. That is http://www.hipandhealthykid.com/wp-content/uploads/2014/HHKWallpaperOtherPages.png and it can only fine http://www.hipandhealthykid.com/wp-content/uploads/2014/HHKWallpaper.png . So, check your image url and add it properly.

[Author]

Posts