Stretched CSS Background

**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...

Code:


<!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

Thread: Stretched CSS Background

Thread Tools

Search Thread

Stretched CSS Background

Bookmarks

Bookmarks

Posting Permissions