PDA

Click to See Complete Forum and Search --> : Non-repeating page background?

vmarasigan
02-27-2003, 09:53 AM
I want to create a page with a large background image, like this one:

http://www.marylandaccountants.com/index.html

(Those of you with screens set at higher res will get the full effect of this)

However, I'm afraid that if my page gets a little longish, the background wil repeat down below. Is there any way, other than making the background graphic insanely large, to keep the image from repeating?
Robert Wellock
02-27-2003, 10:03 AM
If you wanted the background-image to be centre positioned on a page; prevent the image repeating, or only have it repeat either vertically or horizontally only, that could be accomplished fairly easily using Cascading Style Sheets (CSS).


<style type="text/css">
<!--
body {
background-image : url("http://www.yoursite.com/yourimage.jpg");
background-repeat : no-repeat;
background-position : 50% 50%;
}
-->
</style>


For example if the code above was placed between the <head>....</head> it would set a non-repeating background image in the centre of the browser window as your background, obviously you'd have to supply the correct "url" value to point to your own image.
gil davis
02-27-2003, 10:05 AM
This will center the image and keep it from repeating:
<style type="text/css">
BODY {background: url("whatever") no-repeat 50%}
</style>