CODEWITHSUNDEEP
htmlcss
steeped
steeped

Reputation: 2633

Full screen div with content below it in

Using CSS, I would like to create a div with a background image that expands throughout the entire size of the window. There should still be content below this div as the user scrolls. For example, I am looking to do something like: http://dev.chrisriversdesign.com/everafter-wordpress/storybook

What I have so far is:

CSS:

#main-background {
  position: absolute; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#main-background img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  z-index: -1;
}

HTML:

<div id="main-background">
    <img src="BCK.JPG" />
    <div class="content">
        <div class="wrapper">
            TEXT ON LARGE SCREEN-SIZED IMAGE 
        </div>
    </div>
</div>
OTHER TEXT HERE THAT DISPLAYS AS USER SCROLLS

Upvotes: 1

Views: 1297

Answers (3)

sinrise
sinrise

Reputation: 391

I was able to get it working with your HTML. Check out the jsfiddle:

http://jsfiddle.net/7JF68/4/

get rid of the top: 0;, right: 0;, and left: 0; and leave bottom: 0; on your img element, since those properties set the location of the element, and you can't set everything to 0 for obvious reasons.

Upvotes: 0

Polochon
Polochon

Reputation: 2219

try to use this properties and use a background-image instead of the img tag

background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

EDIT

a live sample

http://jsfiddle.net/7q395/

Upvotes: 4

Joe T. Boka
Joe T. Boka

Reputation: 6589

For the main-background img I would just use width: 100% like below:

#main-background img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  width: 100%;
  z-index: -1;
}

Upvotes: 0

Related Questions