Div with 100% height and width regardless of content

[FrickenTrevor]

How do I get a div to stretch out to a full page width and height, and have the background image in the div expand or shrink with the page resize?

[molendijk]

Try this:

<div style="position: absolute; left:0; top: 0; right:0; bottom:0; text-align: center" >
<img src="http://static.giantbomb.com/uploads/scale_small/0/5768/657265-fred_flintstone.jpg" style="height: 100%;">
</div>

<div style="position: absolute; left: 0; top: 50%; width: 100%; z-index: 1; background: transparent; text-align: center; ">
<span style="position: relative; background: red; color: white; padding: 10px; margin: auto">Hi Fred</span>
</div>

[FrickenTrevor]

Any way to hide the img tag? was thinking about something like this...

#header-wrapper {
   position: absolute;
   left:0;
   top: 0;
   right:0;
   background: url(http://static.giantbomb.com/uploads/scale_small/0/5768/657265-fred_flintstone.jpg) no-repeat;
   bottom:0;
   text-align: center;
   height: 100%;
}

header {
   position: absolute; 
   left: 0; 
   top: 50%; 
   width: 100%;
   z-index: 1; 
}

header h1 {
   position: relative;
   background: red;
   color: white;
   padding: 10px;
   margin: auto;
}

<div id="header-wrapper">
     <header>
         <h1>Hi Fred</h1>
    </header>
</div>

[molendijk]

Your code doesn't cause the image to shrink / expand.

[FrickenTrevor]

I know it doesn't, does the image have to be in an img tag to be able to shrink and expand? How could the code that I posted work so the image will?

[molendijk]

I wouldn't know how to do it in a simple way without the image tag. Why don't you want the image tag?

[Beverleyh]

The easiest way to resize would probably be to use background-size:cover;, on the html element

html {
	background: url(img.jpg) center no-repeat fixed;
	background-size: cover;
}

This wont work in IE8 or lower though, but it depends how much support you want to give.

There are more methods here: http://css-tricks.com/perfect-full-p...kground-image/

[FrickenTrevor]

I wouldn't know how to do it in a simple way without the image tag. Why don't you want the image tag?

Its just for cleaner html code really.


EDIT:
I would like to have something done like this site , where they loaded the image in a article element

 <article class="mainPicture" style="background-image:url(IMG/jpg/france-main-picture.jpg)">
                        <div class="fadeMainPicture"></div>
                        <div class="w990px">
                 ...

then adjusted it in the stylesheet style.css:

.mainPicture {
    min-width: 990px;
    min-height: 800px;
    margin: 0 auto;
    background-position: center 0px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

However I was unable to reproduce the same results

[molendijk]

Its just for cleaner html code really, it works however. Thank you.

Using or not using the image tag won't make the code more or less clean. So I think there's no principled reason not to use it.
If you want to always use it on the whole page (the html element) you can use Beverleyh's code, without the image tag.
But if you want to use it on the whole page (html element) or or parts of it (div element), use my code.
Good luck.

[FrickenTrevor]

I should point out I made an edit in the last post