« Q & A page
« tech pages
|
Q: How do I control background images?
by Mike Slocombe
Q: I want to build a home page with a background image. How do I ensure the full image is available on every size screen from a 12" laptop up to a 19" monitor?
Aaron Cripps
A: I'm afraid there's no obvious way of deforming a background image to fit all conceivable screen sizes. And even if it were possible, it probably wouldn't be too visually appealing - a 640-pixel-wide bitmap stretched to fit a 1,600-pixel screen would look a pixel-tastic mess.
You can place a background image on a Web page using the <BODY background="mypic.jpg"> tag, but images smaller than the visible screen area will tile across the page.
A possible solution is to create a table the same size as your image with the <TABLE background="mypic.jpg"> and <TD background="mypic.jpg"> tags, although it still won't resize for bigger screens without tiling.
Style sheets offer a more flexible solution, letting you set a background graphic for the page (or individual elements of a page) and dictate how the graphic should be positioned and repeated.
In this example the background image will only appear once with no tiling and a five-pixel left-hand margin. Try it out by placing the code between the <HEAD> </HEAD> tags on your page:
<style type="text/css">
body {background-image:url
("mypic.jpg");
background-repeat:no-repeat; margin-top:0; margin-left: 5px;
}
</style>
Other variants of the background-repeat tag are:
repeat - repeated both horizontally and vertically.
repeat-x - repeated horizontally only.
repeat-y - repeated vertically only.
Jan 2002
|
