I need to apply different background images to the home page < html > tag and the inside pages of a site. In order to do this the references need to be unique.
Without using class or id, how do I differentiate between the tags?
I tried this, but it doesn't validate:
<html class="inside"...
Thanks!
If you're talking about different background images for different pages, I guess you'll need to create a different stylesheet for each different background you want, and just make sure to include the appropriate stylesheet from each page.
Add the class to your body element, where it is valid.
Then do
body.inside {
background-image: url(/path/to/it.png) repeat;
}
You want this:
CSS:
#home { background: ... ; }
body { background: ... ; }
HTML:
<body id="home">
</body>
Other pages:
<body>
</body>
You should consider using IDs. That way you can keep all the references to your background images in your CSS file. E.g.
#background-main { background-image:url(background-main.jpg) }
#background-page1 { background-image:url(background-page1.jpg) }
#background-page2 { background-image:url(background-page2.jpg) }
You would then just have to reference the ID of the background image you want to have displayed. E.g.
<body id="background-main">
Alternatively, you could use classes.
This approach will make it easier for you to maintain your site.
Inline stylesheet for each different page:
<style> html { background-image: url(someimage.png); } </style>