CSS Problem

Miscellaneous Forums/General Discussion/CSS Problem

Is there a way to "stretch" a background image across the screen? I have

background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

now it would be nice to scale the bg image to browser size. Is that possible?

altitudems

In short. No.

What type of image is it?

Genexi2

Not too familiar with CSS here regarding image handling, but wouldn't it be possible to set the images width & height to "100%" using it? I know you can with the <img src=""> tag in plain HTML.

Perturbatio

no, CSS level 2 doesn't support background scaling. There are other ways to achieve the effect though.
HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<link href="test.css" rel="stylesheet" type="text/css" media="screen">
	<title>Untitled</title>
</head>

<body>
<div id="bg"><img src="http://www.fabricattic.com/gold%20background%20flan.jpg" width="297" height="496" border="0" alt=""></div>
	<div id="main-content">
	This is a test
	</div>

</body>
</html>

CSS:

#main-content{
	position:relative;
	display : block;
}

#bg{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}

#bg, img{
	width:100%;
	height:100%;
}

(it will however, usually look quite crap)

jfk EO-11110

thanks a lot!

Perturbatio

np :)