I'm making a site with big background design and I can't understand a couple of things.
Let me explain what I want to see. My web-site will be looking almost like this site http://www.deepend.com.au/-/website-development-fox8
1. User loads the page
2. Height of every div in my page becomes the same as the height of the browser's window AND STAYS LIKE THIS, so your scrolling through my page becomes more logic.
So my question is: is there property in CSS that can get user's browser window? Or should I use JavaScript? If JavaScript, is there any jQuery plugin to simplify my job?
Thanks for your attention.
- In the example site you provided only the first image is 100% height of the browser window. They use a javascript slider plugin.otherDewi– otherDewi2013-11-03 18:34:49 +00:00Commented Nov 3, 2013 at 18:34
Add a comment |
4 Answers
It's simply a huge image that is set as background of a div and sized as 'cover' in css which means its width determines its height based on its aspect ratio.
Demo: http://jsfiddle.net/f9yy8/4/embedded/result/
* { padding: 0; margin: 0; overflow:hidden;} html, body { height: 100%;} .txt { background-image: url("http://elstika.com/images/2013/09/Pink-Tulips-Bouquet-Huge-Hd-Wallpaper.jpg"); background-repeat:no-repeat; background-size: cover; height: 100%; color:white; padding: 30px; } 
1 Comment
eoLithic
Thanks! Actually I had to remove 'overflow:hidden' to achieve the effect I want! I'm really grateful to you.
You can try to use position:absolute for the div's.
div{ position:absolute; width:100%; height:100%; } 
Comments
To cover 100% width/height of the user's browser window you can do this:
CSS
html, body { width: 100%; height: 100%; overflow: hidden; } body { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } div.scroll { overflow: auto; } HTML
<html> <body> <div class="scroll">All your content inside here</div> </body> </html> 
Comments
you can use simply this code:
div{ width:100vw; height:100vh; } this code work like a charm... :)
