How to make div bg image suitable in full screen mode and allow scrolling content under it

Question

I researched this topic for the last 2 days in a row, tried 250+ code options, and I'm at my end, that's why I'm here now ... I feel like I'm very close to a solution, so hopefully someone here can shift it to the edge ... I'm new to CSS, so if I'm from here from here, I apologize ...

I am trying to achieve an effect that you can view on the stumbleupon.com homepage. When the page loads, the bg image fits perfectly into the visible area of ​​the browser, regardless of resolution. The bg image is not fixed, so you can scroll down to view more content. You can see the same effect at http://www.bakkenbaeck.no/ ... again the original image is perfect and not fixed with the content below.

I thought I finally found my answer when I came across the StackOverflow question and the answer here. Creating a div corresponds to the first screen

I followed the instructions there and came ooh ... but without a cigar.

You can view my test domain, which I installed on www.konnect.co

The code entered for this bg image is

#wrapper-8 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

This displays the image in two browsers that I checked. However, the bg image completely overlaps the contents of the second div on the page. I created a 2nd div, gave it the color bg and added some content for testing, and it was hidden behind the bg image from the div above it. If you resize the browser to a smaller size, it will allow you to start scrolling when the bg image becomes small. Am I missing something using bg image div here? I tried several height options, but can't change anything. Any help would be greatly appreciated.

Answer 1

Here is your solution:

Use absolute positioning for both classes and put content after it on top: 100%!

  .image { position: absolute; width: 100%; height: 100%; background-image: url(images/bg.jpg); background-size: cover; background-color: purple; } .content { position: absolute; top: 100%; width: 100%; height: 200px; background: yellow; } 

 <div class='image'></div> <div class='content'>Here is Your solution!!! :-)</div> 

Answer 2

I am trying to achieve the same as you (at least, I think so). Would something like this work for you?

http://jsfiddle.net/tKNzR/

 html, body { height:100%; } #header-div { height:100%; width:100%; position:relative; top:0; left:0; } 

To make the image in # header-div, always fill the screen, you can use the jquery plugin called backtstretch .

Answer 3

It looks pretty simple and works for me.

I looked at http://www.stumbleupon.com/ and in Chrome browser mode the trick they used to do this appeared. The first div inside the body has a homepage class that uses the following properties

 .homepage { min-height: 720px; position: relative; height: 100%; background: url(https://nb9-stumbleupon.netdna-ssl.com/zuZ2r1FsBTumc2VqMc6CtA) center center; background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; color: #fff; } 

The trap here is background-attachment: fixed; . This ensures that the image will not scroll along with the content.

You can find more information here:

http://www.w3schools.com/cssref/pr_background-attachment.asp

Answer 4

Try the following:

 body { background-image:url('name.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:100% 100%; //min-height:100%; //min-width:100%; background-size:cover; } 

Answer 5

You need this property:

 display:table; 

CSS

 #wrapper-8 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display:table;/*Added this*/ } 

Answer 6

If you put in css for # wrapper-8:

position: absolute; z-index: -1;

then the content will be visible

Answer 7

Remove the delete position: absolute for the first div and in # wrapper-8 give the minimum height to suit your needs.

Answer 8

 html,body,section{ height:100%; } .frame1{ /* <section class='frame1'> */ position: absolute; /* mama told me never to use this but all my friends do */ top: 0; right: 0; bottom: 0; left: 0; /* section shows on load (top:0)*/ background: url(shot1.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .frame2{ /* <section class='frame2'> */ position: absolute; /* mama told me never to use this but all my friends do */ top: 100%; right: 0; bottom: 0; left: 0; /* section scrolled to (top:100%) */ background: url(shot2.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }