CODEWITHSUNDEEP
jqueryhtmlcss
B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10237

How can I change the entire background color of a page?

Based on answer from a similar question here: How can I dynamically change the background-color html?

...I added this code to an event:

    $('html').removeClass('bronzeBackground silverBackground goldBackground').addClass('bronzeBackground');

This partially works, but the color is only changed in part of the page. What must I do to have the entire background of the page use the color? Do I need to also specify 'body' in addition to 'html' as well as perhaps other elements? There must be a one-tag-changes-all approach...

UPDATE

On a related note, I don't know why, but although adding this CSS doesn't work:

#BooksContent #MoviesContent #MusicContent {
    background-color: black !important;
}

...adding this in my jQuery after dynamically populating the contents of the div (id="BooksContent") does work:

$('#BooksContent').css('background-color', 'black');

Upvotes: 0

Views: 1955

Answers (4)

Dom Day
Dom Day

Reputation: 2562

If you don't want to use maxton's answer you could use

$('.bronzeBackground, .silverBackground, .goldBackground').removeClass('bronzeBackground silverBackground goldBackground');

$('body').addClass('bronzeBackground');

( edit, removed stupid typo )

Upvotes: 2

IMSoP
IMSoP

Reputation: 97678

Which elements are affected by the colour scheme is entirely up to you - setting the background colour of absolutely every element on the page is probably not what you want.

The JS you show is fine, but you then need to work with it in the CSS, where you can either make elements have a transparent background, or list multiple selectors to have the same styles, e.g.

body.silverBackground, body.silverBackground nav, body.silverBackground div#main /* etc */
{
     /* CSS for "silver" theme background */
}
body.silverBackground a
{
    /* corresponding link colour to match theme */
}

Upvotes: 1

maxton
maxton

Reputation: 392

For every element on the page, this will work:

$('*').removeClass('bronzeBackground silverBackground goldBackground').addClass('bronzeBackground');

Upvotes: 1

Natwar Singh
Natwar Singh

Reputation: 2275

Try this

$(document.body).removeClass('bronzeBackground silverBackground goldBackground').addClass('bronzeBackground');

Upvotes: 1

Related Questions