CSS and image

[Guest]

I have a CSS tag that formats a header on the page. Currently it has an image
as part of the description.
I have currently copied the tag(#desc) and pasted numerous instances of them
and renamed them to #desc1,2 etc, and used different images. I feel
reasonably certain that this is NOT the right way to put in different images
in the header of different pages. What is the right way to do this?

#desc {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url('images/top.jpg') no-repeat top left;
clear: both;
margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

#desc1 {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url('images/back.jpg') no-repeat top left;
clear: both;
margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

#desc2 {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url('images/left.jpg') no-repeat top left;
clear: both;
margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

 

[Trevor L.]

I have a CSS tag that formats a header on the page. Currently it has
an image as part of the description.
I have currently copied the tag(#desc) and pasted numerous instances
of them and renamed them to #desc1,2 etc, and used different images.
I feel reasonably certain that this is NOT the right way to put in
different images in the header of different pages. What is the right
way to do this?

Well, I am no CSS expert but what is wrong with this?

There is of course another way.
Use one rule (say #desc) and then use JS to alter the background image in
that rule.

While I have used JS to add a style, I haven't used it access an existing
rule and alter a style within that rule. I just know it can be done. If you
want to pursue ths avenue, I am sure others will reply with how to do it.

 

[Trevor L.]

I have a CSS tag that formats a header on the page. Currently it has
an image as part of the description.
I have currently copied the tag(#desc) and pasted numerous instances
of them and renamed them to #desc1,2 etc, and used different images.
I feel reasonably certain that this is NOT the right way to put in
different images in the header of different pages. What is the right
way to do this?

Here is a slightly different way to do it

#desc , #desc1 , #desc2 /* , #desc3, #desc4 etc. */
{
height: 200px;
color: black; /* OR color: #fff; */
padding: 0;
background-color: #505050;
background-repeat: no-repeat
background-position: top left;
clear: both;
margin: 5px 0 0 0; /* OR margin-top: 5px ; */
}

#desc { background-image: url('images/top.jpg'); }
#desc1 { background-image: url('images/back.jpg'); }
#desc2 { background-image: url('images/left.jpg'); }
/* and similarly for #desc3, #desc4 etc. */

 

[Ronx]

I would use an external style sheet named styles.css in the examples
below, linked to all pages:
In the style sheet use

#desc {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url('images/top.jpg') no-repeat top left;
clear: both;
margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

In every page, just before </head> in code view add
<link rel="stylesheet" href="styles.css" <type=text/css">
<style type="text/css">
#desc {background-image:url('images/topx.jpg');}
</style>
</head>

topx.jpg will replace top.jpg in that page. Change topx.jpg to the
correct image in each page.

 

[Murray]

Simple, functional, and practical. I like it.