[RESOLVED] CSS Stretch Background image?

[Static]

is there a way to have a centered Background image stretch according to screen size?
this doesnt work

body {
background-image: url('bg_main.jpg');
background-repeat: no-repeat;
background-position: center;
background-width: 100%;
background-height: 100%;
background-color: black;
}

[Static]

nevermind.. found out u cant.... have to create a layer and stretch that.

[EdCompSci]

HOw do you do it with a layer?
I'm gueesing

<layer background="MemDayFlag.jpg" height="100%" width="100%">

and am trying this as I ask.

[penagate]

There is no such thing as a layer in HTML. There's no way to stretch a background image.

[mendhak]

It's usually done by faking the background. You place the image in a div (which is what he probably meant by layer :cringe: ), and then stretch the div.

#divbg {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;   <------------Notice!
}

#maincontent
{
z-index:1; <--------------Notice!
position:absolute;
}

Then in your HTML,

<div id="divbg"><img src="abc.jpg" width="100%" height="100%"/></div>
<div id="maincontent">all text here</div>

[EdCompSci]

There is no such thing as a layer in HTML. There's no way to stretch a background image.

Yeah that's old HTML.

[Merri]

Nothing new really, but just to show how a CSS expert has done it:
http://www.cssplay.co.uk/layouts/background.html

[Static]

Layer was the wrong choice of words... sorry

basically I need an image to cover the screen... and always center so if u were 800x600 the logo would still be in the middle....

<style type="text/css">
body {
background-image: url('bg_main.jpg');
background-repeat: no-repeat;
background-position: center;
background-color: black;
cursor: hand;
scrollbar-arrow-color: black;
scrollbar-base-color: black;
scrollbar-dark-shadow-color: black;
scrollbar-track-color: black;
scrollbar-face-color: black;
scrollbar-shadow-color: black;
scrollbar-highlight-color: black;
scrollbar-3d-light-color: black;
}

[louisremi]

In modern browsers you can now use the CSS3 property background-size

.selector {
    /* will stretch the image so that it covers all of the element */
    background-size: cover; 
    /* will stretch the image so that it fits perfectly inside the element  */
    background-size: contain;
}

This allows to achieve background stretching while preserving the aspect ratio of the background-image: https://developer.mozilla.org/en-US/...ackground-size

I’ve personally developed a polyfill that implements those properties in IE8: https://github.com/louisremi/background-size-polyfill

[domainflipper]

Thanks for the useful info, its really helped me out too

It's usually done by faking the background. You place the image in a div (which is what he probably meant by layer :cringe: ), and then stretch the div.

#divbg {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;   <------------Notice!
}

#maincontent
{
z-index:1; <--------------Notice!
position:absolute;
}

Then in your HTML,

<div id="divbg"><img src="abc.jpg" width="100%" height="100%"/></div>
<div id="maincontent">all text here</div>