[RESOLVED] CSS Stretch Background image?

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

Code:

---

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

---

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

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

Code:

---

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

---

and am trying this as I ask.

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

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.

Code:

---

#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,

Code:

---

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

---

Quote:

---

Originally Posted by penagate

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

---

Yeah that's old HTML.

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

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

Code:

---

<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;
}

---

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

Code:

---

.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

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

Quote:

---

Originally Posted by 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.

Code:

---

#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,

Code:

---

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

---

---