0

We are using 1 index.html page that includes the tag, in the css the body is set to background colour #ddd. The index.html page is the main template that all other pages are included in. So i cant specify multiple background colours on the body as it uses only 1 index page.

The rest of the pages that are included into the index.html, for example: services.html will start with:

 <div class="container">services content here</div>

Is it possible with CSS to somehow add a class on the container to switch background colours on the body? for example: 

 <div class="container bgWhite">services content here</div>
 <div class="container bgDKGrey">contact content here</div>
 <div class="container bgBlue">reviews content here</div>

Then do something like:

 body .container.bgWhite body {background:white;}

Im not sure how exactly to do this?

EDIT:

Would this not work like someone on here posted: 

 $('.container').hasClass('bgWhite') {
    $('body').css('backround', 'white');
 }

How would i do this for multiple background colours though, if i wanted to switch between multiple background colours on the body?

John
  • 1,777
  • 9
  • 42
  • 66

5 Answers5

2

You can try something with Jquery, something like that:

if ( $(".container").hasClass("bgBlue") ){
    $("body").css('background', 'blue');
};

Here is a fiddle: http://jsfiddle.net/tcjagypy/

Caio Kawasaki
  • 2,894
  • 6
  • 33
  • 69
  • thanks, how would i set this up if i wanted to detect and use multiple background colours dependant on class name – John Oct 29 '14 at 10:41
  • @John here: http://jsfiddle.net/tcjagypy/2/ you can use that. You can understand the code? if you need more colors just create other else if – Caio Kawasaki Oct 29 '14 at 10:54
  • Nearly mate, how would you add in more than x4 colours? Also is it possible to use HEX code rather than red, blue etc? – John Oct 29 '14 at 10:56
  • what is this doing? function bodyBackground (bodyB) { $("body").css('background', bodyB); } – John Oct 29 '14 at 11:01
  • Basically when the page loads, the conditional (if, else if) will be executed, and if the .container has a bgBlue class, the conditional will pass the #0000ff for bodyBackground function. Something like this ... It's pretty simple... Got it? If you do not understand I will try to be clearer... – Caio Kawasaki Oct 29 '14 at 11:03
  • thanks, yeah i get it, just wasn't sure what the first 3 lines are doing with bodyB – John Oct 29 '14 at 11:07
  • bodyB is an argument used to pass values into the function. Once the function is called somewhere you can pass an argument through. Well I'm happy to have helped you ... – Caio Kawasaki Oct 29 '14 at 11:11
1

demo = http://jsfiddle.net/victor_007/q56sk9m9/1/

Html

<div class="container blue">test</div>

jQuery

var color = $('.container').css('background-color');
$('body').css('background-color', color)
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
0

You can change the background of an element with jQuery on any event:

$('button.bgWhite').click(function () {
    $('.container').css('background', 'white');
});

This with a button for example:

<button class="bgWhite">Set .container background to white</button>
KyleK
  • 4,643
  • 17
  • 33
0

First what are the conditions to change the body color?

Anyway you will need to use Javascript to do it using HTML DOM Style Object :

document.getElementById("myH1").style.color = "red";

You can take a look here .

Community
  • 1
  • 1
cнŝdk
  • 31,391
  • 7
  • 56
  • 78
0

It is not possible using only "CSS". Using "Javascript" and "CSS" we can achieve that.

Swati
  • 99
  • 4