How can I change different background images for pages of my web site using CSS?

Question

I apologize for my english. Correct the title if it's necesary, please.

I want different pages of my web site to have different images in some background divs. I'm using one CSS file for all the site.

For example, the supportingText div for the "about me" page has different image than "my project page".

Right now I use inside every pages (aboutMe.html, myProject.html) for any supportingText div a style attribute for this task.

And for example:

When I want to let surfers change entire web site style design I can change to a different CSS file of course.

But if my pages have some different images, as I explained before, should I change others html files to do it?

I know that probably there is a solution in some way like in php .

Consider that I don't know anything about php but if you explain in very easy way won't be a problem to understand!! ;)

Is there a solution in javascript ?

I'm using only XHTML and CSS.

EDIT

Thank you!
You have been very kind.

I understood everything except one concept that I hope you can clarify.
I have many divs with background images, as:
title - myPicture - navigation - supportingText

All of those have a grey levels images.
I would like users can change aspect of the web site.
Something like three options:

• black and white pages
• green pages
• orange pages

So in this case I need to set divs images in a JavaScript script into html file as your example!
So the CSS file only is helpfull for dimension and all other staffs but not anymore for images background? Is it?

Thank you a lot!

Answer 1

I agree with John in that you really shouldn't hardcode style attributes into the HTML. But if for whatever reason you have to you can easily change them using JavaScript.

document.getElementById('supportingText').style.backgroundImage = 'url("image.jpg")';

or if you're using jQuery

$('#supportingText').css('background-image', 'url("image.jpg")');

Update :

Assuming you're using a button to trigger the change, the code (which you would put in your HTML document) would look something like this:

<script type="text/javascript">
    function changeBackground(divId, newImage) {
        document.getElementById(divId).style.backgroundImage = 'url("' + newImage + '")';
    }
</script>
<button onclick="changeBackground('supportingText', 'image.jpg');">Change Background</button>

Essentially what you're doing here is creating a button which calls a JavaScript function ( changeBackground() ), and you're passing in the ID of the div that you want to change, and the name of the image file that you want to change it to. You could have multiple buttons with different values in the 'supportingText' and 'image.jpg' parameters.

Answer to Part 2 :

You can apply styles via CSS or JS (as above). However anything you do in JS will override your CSS. It's really up to you how you divide it up.

Answer 2

If you have hard coded your styles, even just some of them, into your HTML and you want these values to change when someone chooses a new stylesheet then you're in a tough position. Hardcoding those styles into your HTML makes your code inflexible and leaves you unable to make things such as switching stylesheets dynamically easy either with PHP or JavaScript.

Your best bet is to remove the hardcoded style rules from your HTML and place them into your stylesheet. Then switching the stylehseet can be done easily with PHP or JavaScript .

If you can't remove them then you'll need to write your own JavaScript to do this which will be tedious as it will need to dynamically alter each page when it loads. Not only will this probably take a long time to do and be error prone but it can hurt your website's performance if it isn't done well.

Basically, by hardcoding style rules into your HTML you've tied your own hands and have no good options available to you. I recommend removing the hardcoded styles and making sure you avoid doing it again in the future. Not only to avoid issues like this but to make your site faster by allowing your CSS to be cached.