CSS backgrounds: Stretching an Image across a page [Archive]

View Full Version : CSS backgrounds: Stretching an Image across a page

abannet

05-09-2005, 05:57 PM

I'm fairly inept when it comes to CSS, and spent a few hours trying to figure out how to make an image full screen. By looking through websites, I figured out how to get no-repeat to work, however it lies in the upper left corner instead of the screen. Here's what I have:

<HTML>
<HEAD><TITLE>TC Photo Album</TITLE></HEAD>

<STYLE TYPE="text/css">

</STYLE>

<BODY TOPMARGIN=0 LEFTMARGIN=0>

</BODY>
</HTML>

It's not much. Also, can someone tell me if you can right over these backgrounds?

Cheers.

sumeet

05-09-2005, 06:10 PM

CSS doesn't have a function that lets you stretch an image. You can repeat an image to get a similar effect, but that wont work very well with single-photo backgrounds.

I would recommend just fading the image you have so that it grades into some color on the right. For example, if you have a picture of a theatre, use Photoshop or something to make the right side of it fade to "black" or something.

Then set the background to that color and place your non-repeating background image over the black background. It will look better than repeating it or leaving it sharp against some color.

THE CSS:

body
{
background: #000 url(theatre.gif) no-repeat top left;
}

The color of the background on which you'll place the image is above (in red). Change it to what's needed.

abannet

05-09-2005, 07:37 PM

I made the stretch work with some stuff I found online (not CSS). I'm having trouble with my tables: the WIDTH=100% works, but the HEIGHT=100% doesn't work. In fact, HEIGHT only works when I put in a pixel number. I want this page to work for all resolutions. Any help would be appreciated. Here's what I have:

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<style>
body{margin:0px}
.bg{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
}
</style>

</HEAD>
<BODY>

<img class="bg" src="theater.jpg" border="0">
<div style="position:absolute;z-index:5">

<TABLE BORDER=2 CELLPADDING=0 CELLSPACING=0 WIDTH=100%; HEIGHT=59>

<TR>
<TD ALIGN="center">
Trial
</TD>
</TR>
</TABLE>

</div>

</BODY>
</HTML>

Cheers.

Blowfish

12-06-2006, 09:29 PM

Here... This sounds like what you are looking for.

http://www.htmlite.com/faq022.php