Header Image

Forum Moderators: not2easy

Message Too Old, No Replies

Header Image

Don't want common image any more.

Asia_Expat

10:08 pm on May 23, 2006 (gmt 0)

I'm not much good with CSS and I don't know a way around my problem. I have a site that has the same image at the top of each page but now I want a different image for eash page. The header image is called in the CSS file, the relevant section of which is here...

/***** Header *****/#header {
color:#505050;background:#ffffff url(img/front.jpg) bottom left no-repeat;height:250px;margin:0 0 10px 0;padding:0;
}
#header h1 {
font-size:2.5em;font-weight:normal;letter-spacing:-2px;margin:0 0 4px 15px;padding:15px 0 0 0;
}
#header h1 a,#header h1 a:hover {
padding:0;
}#header p {
font-size:1.1em;letter-spacing:-1px;margin:0 0 20px 15px;padding:0 0 0 3px;
}

How can I have a unique image for each page without having a separate CSS file for each page?

Thanks :)

Asia_Expat

1:06 am on May 24, 2006 (gmt 0)

OK, I think I worked it out for myself but I'm getting a few errors.
I removed completely the first line of the header part, where the header image is called and placed it between <stlye> tags in the head section of the page itself and left the rest of the CSS file in place. Everything seems to work perfectly and the page validates.
However, with CSS validation, I get the following warnings...

* Line : 86 (Level : 1) This property applies to block-level elements. : #content
* Line : 90 (Level : 1) This property applies to block-level elements. : #contentwide
* Line : 94 (Level : 1) This property applies to block-level elements. : #contentfull
* Line : 134 (Level : 1) This property applies to block-level elements. : #footer
* Line : 182 (Level : 1) This property applies to block-level elements. : caption
* Line : 186 (Level : 1) This property applies to block-level elements. : th
* Line : 190 (Level : 1) This property applies to block-level elements. : td
* Line : 260 (Level : 1) This property applies to block-level elements. : .textright
* Line : 264 (Level : 1) This property applies to block-level elements. : .center

Any suggestions?

Asia_Expat

1:06 am on May 24, 2006 (gmt 0)

Is the way I did it messy or not? Is there a better way?
I'm trying to learn and do it myself when I can.

doodlebee

2:46 pm on May 24, 2006 (gmt 0)

First of all, those are CSS *warnings*. Youre page still validates - warnings are just that - warnings. nothing more. If you want to deal with them, you can, but you don't have to.

As for changing the header image on each page, assign a class to the #header (or just add a number to the name) and change your background image, and then associate each class with a different page. For example:

CSS:

#header {background-image:url(image.jpg);}
#header2{background-image:url(image2.jpg);}
#header3{background-image:url(image3.jpg);}

Page1:

Page2:

Page 3

Asia_Expat

3:06 pm on May 24, 2006 (gmt 0)

Cheers buddy :)
I'm grateful for your advice and I hadn't thought of that method. It seems so easy when it's showed to you. I'm going to use that method on my other website.

Regarding the one I outlines above, I think I'll continue using my own workaround because there will literally be thousands of separate header images and it would turn into a very long css file. My workaround also seems to validate, so if you think it will be OK, I'll continue to use it.....

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Really great widgets" />
<meta name="keywords" content="Platinum widgets" />
<meta name="author" content="Asia_Expat" />
<link rel="stylesheet" type="text/css" href="widgets.css" media="screen,projection" />
<style type="text/css">
#header {
color:#505050;background:#ffffff url(img/front.jpg) bottom left no-repeat;height:250px;margin:0 0 10px 0;padding:0;
}
</style>
<title>Widgets</title>
</head>

<body>

swa66

6:09 pm on May 24, 2006 (gmt 0)

Alternatively you could just stop usign the image as a backgroud and consider it content instead of markup.

Asia_Expat

7:07 pm on May 24, 2006 (gmt 0)

Unfortunately, I can't post a link to the site as a demo. With the webpage design as it is, adding the header image with the css as a background is a rather elegant and works very well, with the <h1> title text appearing over the top of the image.

Header Image

Don't want common image any more.

Asia_Expat

Asia_Expat

Asia_Expat

doodlebee

Asia_Expat

swa66

Asia_Expat

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week