Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved different background colors on different pages


Question

Posted · Report post

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/

Share this post


Link to post
Share on other sites

13 answers to this question

Posted · Report post

Problem solved, thank you guys :)

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

Try this


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

    background-color: #0B0B0B;

}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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]

Share this post


Link to post
Share on other sites