...
PDA

Resize Background Image

Bradj47
11-09-2008, 05:58 PM
Is there a way to have the image of the background resize to the size of the window?
abduraooft
11-10-2008, 07:14 AM
There is no reliable method in CSS as of now, however you could fake it by applying z-index on a normal img element. see http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
coothead
11-10-2008, 10:36 AM
Hi there Bradj47,

and a warm welcome to these forums. ;)
Further to what our friend abduraooft has said..
The css 3 'background-size' property (http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size)
...has been adopted by Opera, Safari and Konqueror browsers.
I would hazard a guess that Firefox won't be far behind and IE well....don't hold your breath. ;)
Here is an example for you to try in the above mentioned browsers..

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background-image:url(http://www.coothead.co.uk/images/blood.jpg);
-o-background-size:100% 100%; /* Opera */
-webkit-background-size:100% 100%; /* Safari */
-khtml-background-size:100% 100%; /* Konqueror */
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>

</head>
<body>

<div></div>

</body>
</html>

coothead

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum