Action, protest, campaigns, demos and issues magazine features, photos, articles, stories photos of London, New York, Wales, England and photography features music, parties, clubs, events, records, releases drug information, harm reduction, no-nonsense guide punch a celebrity football, features, issues, cardiff city games, useless games and diversions technical info, web authoring, reviews and features site news, updates and urban75 blog urban75 community news and events urban75 bulletin boards join the chatroom search urban75 back to urban75 homepage
London features, photos, history, articles New York features, photos, history, articles Brixton features, photos, history, articles panoramas, 360 degree vistas, London, New York, Wales, England Offline London club night festival reports, photos, features and articles urban75 sitemap and page listing about us, info, FAQs, copyright join our mailing list for updates and news contact urban75
web question and answers

« 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
background-repeat:no-repeat; margin-top:0; margin-left: 5px;

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

urban75 - community - action - mag - photos - tech - music - drugs - punch - football - offline club - brixton - london - new york - useless - boards - help/FAQs - © - design - contact - sitemap - search