CSS background-image property

**camm** · Oct 15, 2004 05:38

This follows on something I raised yesterday (see 'class or id selectors with javascript').
I've done a template for a set of "location" pages which will be aimed at and optimized for people who are looking for particular goods/services in particular locations. These pages will be linked to an order engine on a separate website so that -- for instance -- if you selected Product A from newsite.com/reading.html, you would be transported to an order form on existingsite.com on which the product and location were already selected.

And what has this to do with CSS, you ask? Bear with me, please.

In establishing design criteria for the new site, one of the major appeals of CSS layout (as opposed to tables) was the prospect of leaner code in which content was more visible and accessible to search engine spiders. So in my mind, anything which would bloat the code is at least suspect and must be justified.

Which brings me to javascript.
I am persuaded that we need some; at very least, to make the links to the appropriate dynamic pages on existingsite.com
It has been proposed that we also use javascript as an internal work-saver on newsite.com to handle images which are repeated on many pages. That way -- the logic goes -- we can change an image on many pages with a single change in a .js file.

I'm wondering if the same thing could be accomplished (with far fewer visible lines of code in the html) using the background-image property in CSS.
If the image name and location can be specified in the rule for a DIV ID or DIV CLASS -- let's say: .prodimage1 { (other rules), background-image: url(../images/prodimage1.jpg); } -- then that class (or ID) could be used on many location pages, and the image on all of them could be changed by making a single alteration back in the CSS file. Or am I missing something?
Assuming that this idea would work, can anyone point to disadvantages as compared to solving the problem with javascript?
Thanks, Cam

**rbutler** · Oct 15, 2004 06:17

Originally Posted by camm

I'm wondering if the same thing could be accomplished (with far fewer visible lines of code in the html) using the background-image property in CSS.

Yes it can be achieved easily, and with less code than with JavaScript.

Originally Posted by camm

If the image name and location can be specified in the rule for a DIV ID or DIV CLASS -- let's say: .prodimage1 { (other rules), background-image: url(../images/prodimage1.jpg); } -- then that class (or ID) could be used on many location pages, and the image on all of them could be changed by making a single alteration back in the CSS file. Or am I missing something?

Only issue you're missing is an ID can only be used once, so it would need to be a class or defined within the body tag within an external style sheet

Originally Posted by camm

Assuming that this idea would work, can anyone point to disadvantages as compared to solving the problem with javascript?

I can't point you to anything in specific but think for a second what CSS and JavaScript do. Why do you want to do this with JavaScript? JavaScript is a client side scripting language, CSS is used to presentation of images, elements, classes, etc. Use the technology that is designed for this particular task. CSS is the way to go.

styles.css (which is external)

Code:

body{
   background-image:url(something.jpg);
}

index.html, about us, contact, etc on and on

Code:

<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>

</body>
</html>

Make one change to the image in the external style sheet and you're done. Simple as that.

**camm** · Oct 15, 2004 08:04

Thanks Ryan ... that confirmation is reassuring. A number of times on this venture I've been quite sure I knew what I was doing, only to find ...

Only issue you're missing is an ID can only be used once, so it would need to be a class or defined within the body tag within an external style sheet

Actually I considered that. Right now the template calls for three product images side by side. As I understand the rule, ID can be used once per page, so assuming I called them #prodimage1, #prodimage2, #prodimage3 I should be able to use each of those DIV ID's on each separate location page like /calgary.html, /albuquerque.html, /entebbe.html .
Right? On the other hand, no reason not to use classes in this instance.
Cam

**rbutler** · Oct 15, 2004 08:09

Either way will work, creating a unique div or class. My preferred method, since I like to stick to standard schemes as much as possible and general coding practices, use classes in this instance, this what they are designed for, to be used over and over again. Just be careful in future practices not to overuse classes. What I mean by that is don't do this:

.class{
color:#FF00000;
}

.class_two{
color:#FF0000;
}

Then on two separate pages, some people will use the first rule and on the second page use the second rule. There's no need to. Simply use the first.

But you'll be fine in this instance. Just do something like .product1, .product2, etc to suit your needs.

Be smart and careful about your design, it will alleviate headaches in the future, believe me, I know.

**Paul O'B** · Oct 15, 2004 08:39

It has been proposed that we also use javascript as an internal work-saver on newsite.com to handle images which are repeated on many pages. That way -- the logic goes -- we can change an image on many pages with a single change in a .js file

You could have just uploaded a new image with the same name and that would have done the trick

- no coding necessary.

Of course controlling your page presentation is what css is about and you can control the whole look of the site simply by changing the css.

Paul

User Tag List

Thread: CSS background-image property

Thread Tools

Display

CSS background-image property

Bookmarks

Bookmarks

Posting Permissions