I'm using a stylesheet that has an image within it. What I'd like to do is display a different image in different pages, while all other formatting is the same. Right now, I'm having to replicate the full style code below and renaming it. For example, replicate it using #nav2.. nav3, etc. But I need to do this for many pages and it creates unnecessary codes on the css file and increases the file size. What's my alternative in achieving this? #nav { position: absolute; top: 0; left: 0; width: 252px; padding-top: 292px; background: url(images/pic_1.jpg) no-repeat; //I'M REFERRING TO THIS IMAGE } #nav ul { background: bottom right #991111 url(images/nav_bot.jpg) no-repeat; margin: 0 7px 0 28px; padding: 5px 20px 15px 20px; } #nav li { list-style: none; background: bottom left url(images/dots.jpg) repeat-x; } #nav a { color: #FDE7C2; font: 18px "times new roman", serif; font-style: italic; background: #991111; padding-right: 8px; } Code (markup):
Here's a way. Tag the body with an ID: <body id="about"> Code (markup): or class: <body class="about"> Code (markup): Then use apply different styles in your css file depending on the body ID: #about #nav { background: url(images/about.jpg) } #contact #nav { background: url(images/contact.jpg) } Code (markup): Or use a class: body.about #nav { background: url(images/about.jpg) } body.contact #nav { background: url(images/contact.jpg) } Code (markup): Or you can use multiple classes to create a hierarchy: <body class="members members-admin members-admin-superuser"> Code (markup): And the class: body.members #nav { background: url(images/members.jpg) } body.members.members-admin #nav { background: url(images/members-admin.jpg) } body.members.members-admin.members-admin-superuser #nav { background: url(images/members-admin-superuser.jpg) } Code (markup): If you use multiple classes, then be aware of this IE problem: http://www.ryanbrill.com/archives/multiple-classes-in-ie The prefix method above sidesteps IE6's stupidity. Of course, you don't have to apply an ID or class to the body tag. You could do it directly on the DIV in question. Doing it on the body is useful if you need to provide more unique styling to more sections of your page.