Resolved different background colors on different pages

[svabodesign 0]

On my home page I want to have a different background color than the other pages on the website.

I added this

body.home {background:#01293D;}

But when I did the image stopped showing. Is there anyway I can still apply background color and keep the image?

http://www.sailubju.com/

[James B 436]

Hi there,

Try this

.page-id-13 body, body.fixed_width {

    background-color: #0B0B0B;

}

[svabodesign 0]

Hi,

I applied the code you gave me but the other pages got the same background color as home

[Danny+ 1,327]

Hi,

You need to identify all the page ID's that you wish to have different background colors on. For example:

.page-id-1 body, .page-id-1 body.fixed_width { background-color: black; }

.page-id-2 body, .page-id-2 body.fixed_width { background-color: red; }

.page-id-3 body, .page-id-3 body.fixed_width { background-color: blue; }

.page-id-4 body, .page-id-4 body.fixed_width { background-color: green; }

[/code]


You can identify the page id by viewing the body class using Firefox or Google Chrome web dev tool.

[svabodesign 0]

ok, I tried this

.page-id-13 body, .page-id-13 body.fixed_width {

background-color: #01293D;

}

.page-id-blog body, .page-id-blog body.fixed_width {

background-color: #ffffff;

}

.page-id-shop body, .page-id-shop body.fixed_width {

background-color: #02847e;

}

But somehow it is the blogs background color on all pages

[Danny+ 1,327]

Can you provide a link to these pages so I can take a closer look.

[svabodesign 0]

yes of course

http://www.sailubju.com/

http://www.sailubju.com/blog/

http://www.sailubju.com/shop/

[Danny+ 1,327]

Hi,

Add this to your custom CSS:

//Shop

body.page.page-id-24 { background: red; }


//Blog

body.blog { background: green; }


//Home

body.home { background: blue; }[/code]


However, this may over write your background image.

[svabodesign 0]

Yeah it did write over the background image. This was a tricky one..

[Danny+ 1,327]

Do you require any further assistance or can I mark this topic resolved.

[svabodesign 0]

My client want both background color and a background image on the site. If it's possible I would appreciate more assistance

[Danny+ 1,327]

Well you could use basic CSS and add the image to another element on the site, for example:

#header {

background-image: url(http://www.sailubju.com/wp-content/uploads/2012/09/headerblog.jpg);

background-repeat: no-repeat;

background-attachment: scroll;

background-position: 50% 0%;

}

[/CODE]

[svabodesign 0]

Problem solved, thank you guys

[mackenzie 12]

The topic was marked as resolved.