Div Background Image.Resize To Fit Browser Window.?

Forum Moderators: not2easy

Message Too Old, No Replies

Div Background Image.Resize To Fit Browser Window.?

mark4man

3:23 am on Feb 13, 2010 (gmt 0)

hello...

I would like to have a background image (.jpg) automatically resize to fit any browser's window...& I read somewhere on the web it should be accomplished by placing the image in a layer (as a background image); & then set the layer size to 100%.

can someone please tell me how the coding goes for this...?

thanks very much,

mark4man

bzgzd

6:49 pm on Feb 14, 2010 (gmt 0)

I think you need to use image because backgrounds are not resized. And using layers is I believe using z-index.

So image with 100% width and height and with z-index -1 to be behind and position: fixed.

Actually I am not really sure why I had to set content div to position: absolute on 0,0 but without that there was always small vertical scrollbar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<style type="text/css">

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
img { border: 0; }

img#back
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}

div#content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>

<body>
<img id="back" src="road.jpg" alt="" title="" />

<div id="content">
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
</div>
</body>
</html>

mark4man

7:26 pm on Feb 14, 2010 (gmt 0)

bzgzd...

that's pretty cool, man...thanks...!

I had given up on this, as I had gotten back no successful codes, until yours.

while we're on the subject: that content (text)...how can I place text in a div & then have that div always be 1) centered horizontally & 2) fixed vertically, as the browser window size changes (& the image expands or contracts)...?

if I (we) can pull that off...that would be nice.

thanks again,

mf

alt131

8:32 pm on Feb 14, 2010 (gmt 0)

@bzgzd

I had to set content div to position: absolute on 0,0 but without that there was always small vertical scrollbar.

Fix by setting overflow:hidden on the body and html as in:

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
#back {position:absolute; z-index:-1; width:100%; height:100%;}

Where #back is the id of the (unsized) "background" image that will be placed into the body - or the id of the element containing the image if using a strict doctype. This method doesn't need the real content to be wrapped by a positioned "container" div (like div#content). Tested in op9*, ie6-8, f3*, winSafari3&4.

@mark4man

how can I place text in a div & then have that div always be 1) centered horizontally & 2) fixed vertically, as the browser window size changes (& the image expands or contracts)...?

Check out Vertical Centre [webmasterworld.com] in the forum library. Older, but lots of information about "why" as well.