screen resolution change stylesheet

css image sizing

[thehittmann]

Im fairly new to using css and on a new site that ive been doing i want a full screen title bar to appear at the top of each page. The text on each gif is different according to the page. How do I size these images using css. Then how can I show a css depending on what screen resolution the user has so they dont have a horizontal scroll bar.

[iamlost]

Detecting screen size/resolution and offering appropriate image would require scripting of some sort.

An alternative is something generic using the power of css. My very basic example follows:

css:

html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#header {
width: 100%;
height: 20%;
}
#header img {
width: 100%;
height: 100%;
}

html:

<div id="header">
<img src="your-image.gif" />
</div>

Make your height an appropriate percentage for your particular image. Now it doesn't matter what the viewers screen rez is, it will display as designed, and require only one image.

The only time this method falters is if your original image is so small that resizing causes distortion or blurring.