Say, for example you wanted to have an image which filled the whole screen without being cropped or repeated regardless of screen size:
The HTML would onyl need a div wrapper with the image inside...
- <div id="wrapper">
-
-
<img src="image.jpg">
-
-
</div>
And the CSS...
- #wrapper {
-
width: 100%;
-
height: 100%;
-
}
-
-
#wrapper img {
-
width: 100%;
-
height: 100%;
-
}
In this example, the div wrapper is set to be 100% of the screen. The image inside is set to be 100% of the wrapper size, so as you change the screen size, the wrapper size changes as does the image inside. Obviously, you'll want to use an image to suit the largest resolution as this can be shrunk down - using a small image will look crappy when enlarged!
It's all about using percentage widths - not fixed widths. Experiment with this to get fluid layouts which look good at any resolution.
The easiest way to align your text with an image would be to put the image in the same div as the text. This will give you easy control over how they both sit together.
- Jay
14
