making a background image fit!

Printable View

Oct 24th, 2002, 08:00 PM
KnIgHt

making a background image fit!

Hello, I was just wondering if anyone could help me out with a cascading style sheet.

I'm programming my website in xhtml transitional and I'm trying to use a cascading style sheet to put the background image into the frame. I got that far but is there any way to make that background image fit perfectly to the frame?

Meaning I want the bottom right part of the picture on the bottom right of the frame and the bottom left of the picture on the bottom left, etc...

If anyone could help me it would be much appreciated.

Thanx.;)
Oct 25th, 2002, 08:29 AM
Doe maar

try something like this

<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
</HEAD>
<BODY onload="return window_onresize()" onresize="return window_onresize()">
<img id=myImg src="coffee.gif" style="position:absolute;left:0px;top:0px;">
</BODY>
</HTML>
Oct 25th, 2002, 12:24 PM
Rick Bull

Yeah I think JS or CSS is probably the only way to do it at the moment, but CSS 3 will have support for background-image stretching. If you want CSS I think this should work:

Code:

<img src="position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:0;" />
Oct 25th, 2002, 01:42 PM
KnIgHt

well, it somewhat works, but how do you keep the bottom of the picture to stretch to the bottom of the frame?
Oct 25th, 2002, 05:05 PM
KnIgHt

Here, check this out. I decided to make my background image load in the index.html and make the 2 frames transparent.

Now how do I get this stupid background picture to stretch over the whole background and resize to the appropriate width and height as the window gets bigger and smaller?

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<frameset cols="21%,*" framespacing="0" border="0" frameborder="no" style="background: url(background.gif); position: absolute; top: 0px; left: 0px; width:bg.width; height: 100%; z-index: 0">
<frame name="menu" src="menu.html" scrolling="no" marginwidth="0" marginheight="0" noresize="noresize" frameborder="no" style="background: none" allowtransparency="true">
<frame name="main" src="main.html" marginwidth="0" marginheight="0" noresize="noresize" frameborder="no" style="background: none" allowtransparency="true">
</frameset>

</html>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>

<body>
</body>
</html>

this is one of the frames and the other is currently the exact same.
Oct 25th, 2002, 05:52 PM
Sastraxi

Unfortunately I don't think this is possible, only way would be to have an IMG that was on a layer behind everything else, and to resize that dynamically with javascript.
Oct 25th, 2002, 07:10 PM
KnIgHt

Quote:

Originally posted by Sastraxi
Unfortunately I don't think this is possible, only way would be to have an IMG that was on a layer behind everything else, and to resize that dynamically with javascript.

Could you explain to me how I would make a layer behind the others for that image?