I want to create a page with a large background image, like this one:<br />
<br />
<!-- m --><a class="postlink" href="http://www.marylandaccountants.com/index.html">http://www.marylandaccountants.com/index.html</a><!-- m --><br />
<br />
(Those of you with screens set at higher res will get the full effect of this)<br />
<br />
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?<!--content-->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).<br />
<br />
<br />
<style type="text/css"><br />
<!--<br />
body {<br />
background-image : url("http://www.yoursite.com/yourimage.jpg");<br />
background-repeat : no-repeat;<br />
background-position : 50% 50%;<br />
}<br />
--><br />
</style><br />
<br />
<br />
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.<!--content-->This will center the image and keep it from repeating:<br />
<style type="text/css"><br />
BODY {background: url("whatever") no-repeat 50%}<br />
</style><!--content-->
<br />
<!-- m --><a class="postlink" href="http://www.marylandaccountants.com/index.html">http://www.marylandaccountants.com/index.html</a><!-- m --><br />
<br />
(Those of you with screens set at higher res will get the full effect of this)<br />
<br />
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?<!--content-->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).<br />
<br />
<br />
<style type="text/css"><br />
<!--<br />
body {<br />
background-image : url("http://www.yoursite.com/yourimage.jpg");<br />
background-repeat : no-repeat;<br />
background-position : 50% 50%;<br />
}<br />
--><br />
</style><br />
<br />
<br />
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.<!--content-->This will center the image and keep it from repeating:<br />
<style type="text/css"><br />
BODY {background: url("whatever") no-repeat 50%}<br />
</style><!--content-->