Stretched CSS Background [Archive] - Dynamic Drive Forums

onestopplay

10-31-2009, 02:39 PM

How can I do something with the CSS background like this:
http://www.thenorthface.com/

I want the image stretched on the background and not move no matter how big the browser is, it's always full screen.

It would be great if I could do this with only changing my style.css. I have a Content Management System and they will probably charge me for having to make DIVs. But, I am allowed to change the css for free. If the only way to do this is with DIVs, thats fine, just let me know how.

Thanks in advanced!!!!!

-onestopplay

coothead

10-31-2009, 02:59 PM

Hi there onestopplay,

here is an example that works in Opera, Safari, Konqueror and Firefox...

<!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 */
-moz-background-size:100% 100%; /*not working in Firefox as yet, waiting for version 3.6 */
background-repeat:no-repeat;
background-attachment:fixed;

/*firefox work-around*/

-moz-border-image:url(http://www.coothead.co.uk/images/blood.jpg) 0;
border:0;

/********************/
}
</style>

</head>
<body>

<div></div>

</body>
</html>

coothead