|
-
Oct 24th, 2002, 08:00 PM
#1
Thread Starter
Lively Member
 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
#2
Addicted Member
try something like this
<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function window_onresize() {
myImg.height = window.document.body.clientHeight
myImg.width = window.document.body.clientWidth
}
//-->
</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
#3
Frenzied Member
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
#4
Thread Starter
Lively Member
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
#5
Thread Starter
Lively Member
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
#6
Good Ol' Platypus
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.
All contents of the above post that aren't somebody elses are mine, not the property of some media corporation. 
(Just a heads-up)
-
Oct 25th, 2002, 07:10 PM
#7
Thread Starter
Lively Member
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?
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote