Centering background images. Newbie question.

liunx

Guest
Hi all,<br />
<br />
I want to center my backgrounds so the picture will always be centered whatever screen resolution people are using to view the site. I've designed the site at 800x600 and 'padded' the image to get it centered but when viewed at 1024x768 or higher the image tiles and looks grim :( and I can't stop it. Arrggg. The html I have is.....<br />
<br />
<br />
<html><br />
<br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<title>cauliflower fungus</title><br />
<meta name="GENERATOR" content="Microsoft FrontPage 3.0"><br />
<meta name="Microsoft Border" content="none"><br />
</head><br />
<br />
<body background="../images/jpg/faded-g-squirl.jpg" bgcolor="#008000" text="#FFFF00"<br />
link="#FFFF00" vlink="#FFFF00" alink="#FFFF00" bgproperties="fixed"><br />
</body><br />
</html><br />
<br />
What do I need to add so I get a single image that is centered? I've looked on some html help sites and the command 'repeat-norepeat' keeps croping up but I can't work out how to use it :( As you can probably tell I'm a bit of a novice so be kind if I'm missing the obviouse. :)<br />
<br />
Tnx in advance<br />
Ponder.<!--content-->you will need to use some CSS, here is an example using an inline style sheet, remove "fixed" if you want the background to scroll with the page, will not work in older browsers:<br />
<br />
<br />
<html> <br />
<br />
<head> <br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <br />
<title>cauliflower fungus</title> <br />
<meta name="GENERATOR" content="Microsoft FrontPage 3.0"> <br />
<meta name="Microsoft Border" content="none"> <br />
<style type="text/css"><br />
body<br />
{ <br />
background: #008000<br />
url("../images/jpg/faded-g-squirl.jpg") <br />
no-repeat fixed <br />
center center<br />
}<br />
</style><br />
</head> <br />
<br />
<body background="../images/jpg/faded-g-squirl.jpg" bgcolor="#008000" text="#FFFF00" <br />
link="#FFFF00" vlink="#FFFF00" alink="#FFFF00" bgproperties="fixed"> <br />
</body> <br />
</html><!--content-->Hi Kevin and thanks it works a treat :D I'm well chuffed!<br />
<br />
Yours Ponder.<!--content-->
 
Back
Top