Stretch Background Image

Hi guys. I’m using Dreamweaver MX and I would like to have a background image. But I would like the background image to be streched across the screen and not like tiles. Does anyone know how I can do this?

Not possible.

Oh, okay. Thanks.

It is possible with a little css and not using a background as such.

Hmmm … can you be a bit more specific? If I understand you correctly, you would like to have one image that functions as your background and have that image be as wide as the user’s screen, is that correct?

If so, then you can do that with CSS. Though I’m not sure I understood you correctly.

A good example is John Oxton’s site.

That looks cool… but it doesnt really stretch

Try this


body {margin: 0px;}
#background {width: 100%;
                    height: 100%;
                    left: 0px;
                    top: 0px;
                    position: absolute;
                    z-index: 0;}
#pageContent {z-index: 1;
                     position: absolute;}


<div id="background">
<img src="background.jpg" style="width: 100%; height: 100%;">
<div id="pageContent">
This should work

That should work to an extent… works great in firefox. but IE likes to keep the image width and height ratio… not sure if there is a workaround/hack for this. If you can think of one let us know :slight_smile:

Try making the background image super wide.

Yeah but the only propblem with that is if a user has a small screen than it won’t fit…

I’ll have a go at that CSS script one. :slight_smile:

Sure it will. Why do you think it won’t fit a small screen? Are you afraid it will cause horizontal scrolling? Screen size doesn’t matter.

For CSS I usually use:

background-image : url(images/bg.gif);
background-repeat : no-repeat;

That’s a wide image that will cover common resolutions (937px to be exact), not one that stretches. Nonetheless it’s a good option to go with if all you can do is a static image background.

You won’t be able to stretch a background image until CSS3 and SVG get widespread support. Trying to stretch a raster background image won’t work and if it did it would look horrible anyway so I don’t recommend it :slight_smile:

Vinnie’s right, it’s just a super wide image like I said to do above.

Try viewing it in your highest possible resolution.

Yeah, I know which is why I explicitly stated that I was unsure whether I understood the original question. :slight_smile:



Here is what I do to stretch background images over the full browser window. It works differently in different browsers of course (come on boys, get it together!) and also depends on the image size a bit. But overall works pretty well.

It makes use of an HTML table to do the stretching because they allow you to stretch an image to fill the full cell, so you just make the cell full screen size, and then place it in an absolute div.

The downside is that you need to the rest of you content to also be a a div, but in most cases this is completely fine.

[I][FONT=Courier New]<div sytle="position: absolute; ">
<table border=0 width=100% height=100% cellspacing=0 cellpadding=0>
<tr><td><img width=100% height=100% src=background_image_here.jpg></td></tr>

<!-- the rest of the site content –>
<div style=“position:absolute; left; top: 0px; bottom: 0px; left: 0px; right: 0px;”>
All the site content in here.

<table align=center border=5 bgcolor=red>
<tr> <td>one</td><td>two</td></tr>
<tr> <td>5ive</td><td>space</td></tr>
<tr> <td>6ix</td><td>junk</td></tr>
<tr> <td>7even</td><td>foobarbaz</td></tr>

<font size=7 color=white>
More here.

Hope that helps.

Nathan P. Clarke.

All the above is full of invalid and decrepated code…

[i][font=Courier New]

[/font][/i][i][font=Courier New] <font size=7 color=white> 
   More here.
   </font>[/font][/i][i][font=Courier New]

[/font][/i][font=Courier New]

Nadia [/font]