[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;
}
Re: CSS Stretch Background image?
nevermind.. found out u cant.... have to create a layer and stretch that.
Re: [RESOLVED] CSS Stretch Background image?
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.
Re: [RESOLVED] CSS Stretch Background image?
There is no such thing as a layer in HTML. There's no way to stretch a background image.
Re: [RESOLVED] CSS Stretch 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>
Re: [RESOLVED] CSS Stretch Background image?
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.
Re: [RESOLVED] CSS Stretch Background image?
Nothing new really, but just to show how a CSS expert has done it:
http://www.cssplay.co.uk/layouts/background.html
Re: [RESOLVED] CSS Stretch Background image?
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;
}
Re: [RESOLVED] CSS Stretch Background image?
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
Re: [RESOLVED] CSS Stretch Background image?
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>