Log in

View Full Version : Div with 100% height and width regardless of content


FrickenTrevor
08-13-2014, 11:25 PM
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
08-14-2014, 12:23 AM
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
08-14-2014, 02:00 AM
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
08-14-2014, 10:27 AM
Your code doesn't cause the image to shrink / expand.
FrickenTrevor
08-14-2014, 11:23 AM
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
08-14-2014, 12:34 PM
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
08-14-2014, 01:27 PM
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-page-background-image/
FrickenTrevor
08-14-2014, 10:34 PM
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 (http://www.lempens-design.com/), 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 (http://www.lempens-design.com/WD_CSS/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
08-14-2014, 10:59 PM
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
08-14-2014, 11:52 PM
I should point out I made an edit in the last post
molendijk
08-15-2014, 01:06 PM
You could use a mix of css and js:


<!doctype html>
<html >
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>&nbsp;</title>


<body style="overflow-x: hidden; font-family: verdana; font-size: 14px">

<div id="picture" style="position: absolute; left: 0; top: 0; background: url(http://www.lempens-design.com/IMG/jpg/france-main-picture.jpg) center no-repeat ; background-size: cover; z-index: -1; "></div>



<div style="position: absolute; left: 0; top: 50%; width: 100%; text-align: center; ">
<span style="position: relative; background: transparent; color: white; padding: 10px; margin: auto; font-family: lucida handwriting; font-size: 50px">B I E N V E N U E</span>
</div>


<div style="position: absolute; top: 100%; width: 95%; text-align: center; ">
<h1>De Paris à Luxembourg</h1>
Né à Paris le 14 février 1977, cela fait maintenant <b>plus de 10</b> ans que je vis de ma passion, le webdesign.<br>
FrickenTrevor, I wouldn't trust this person if I were you.<br>
Right on the first page he makes a rather stupid spelling mistake: je <b>vie</b> de ma passion should be je <b>vis</b> de ma passion.<br>
Doesn't look very professionnel.
</div>



<script>
function resize_it()
{
document.getElementById('picture').style.width=window.innerWidth+'px';
document.getElementById('picture').style.height=window.innerHeight+'px';

}
//resize_it();
window.onload=onresize=resize_it;
</script>

</body>

</html>
Beverleyh
08-15-2014, 02:08 PM
I am absolutely astounded that anyone would put a 11.5MB web page online!!!
FrickenTrevor
08-15-2014, 09:40 PM
You could use a mix of css and js [...]

How can the aspect ratio be kept with your JS? The height stays the same when the page is resized however the width of the image is not kept. I tried this, but it didnt keep the aspect ratio



jQuery.fn.resizeHeightMaintainRatio = function(newHeight){
var aspectRatio = $(this).data('aspectRatio');
if (aspectRatio == undefined) {
aspectRatio = $(this).width() / $(this).height();
$(this).data('aspectRatio', aspectRatio);
}
$(this).height(newHeight);
$(this).width(parseInt(newHeight * aspectRatio));
}
molendijk
08-15-2014, 10:03 PM
That's strange. It's OK on my machine. The only thing is that a small portion of the image becomes invisible when the window gets very small.
Did you take a look at Beverleyh's 3 Ways to Resize/Scale Web Images in Responsive Design (http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design)?
FrickenTrevor
08-15-2014, 10:15 PM
a small portion of the image becomes invisible when the window gets very small.

Thats what I was talking about
molendijk
08-15-2014, 10:57 PM
No, you were talking about the ratio of the width of the image to its height (which is something quite different). That's no problem in my code. I'll try to correct the issue of the image being cut off in small windows as soon as I've got some time. But have you looked at Beverleyh's code?
FrickenTrevor
08-15-2014, 11:19 PM
Yeah I have, it seems like a script would be easier than using calculations. Its a great post though and very helpful
FrickenTrevor
08-18-2014, 08:26 PM
I'll try to correct the issue of the image being cut off in small windows as soon as I've got some time

Any luck with trying to correct it?
molendijk
08-18-2014, 08:51 PM
Sorry, no luck yet. I've got too little time at the moment.
molendijk
08-19-2014, 11:18 AM
Frickentrevor, I don't think what you want is possible. If we want to maintain the width-height ratio, there will always be some part of the image being cut off in smaller windows.
And that's precisely what also happens in the site (http://www.lempens-design.com/) you mentioned.
tolard
08-26-2014, 07:42 AM
If you want to always use it on the whole page (the html element) you can use Beverleyh's code, without the image tag.