CODEWITHSUNDEEP
htmlcsscss-position
Munch
Munch

Reputation: 779

Content Scrolls over image

So I have an image which isn't set as the background, but takes up the entire width and almost all of the height. I want this image to remain in it's position and as the user scrolls, the content below scrolls over the top of the image.

I tried using:

position: fixed;
z-index: -1; /* Or another value */

but neither or together worked.

What I have without the position or z-index applied: https://jsfiddle.net/hhcvmrfx/

I want the div container to appear under the image and only overlap the image when the user scrolls.

Upvotes: 0

Views: 64

Answers (2)

UncaughtTypeError
UncaughtTypeError

Reputation: 8712

To overlap the container below only when the user scrolls down, you'll need to set a padding-top value, to your parent .container, equal to or less than the height of the fixed image in question.
Then apply your background colour to the nested div element instead.

body {
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
  overflow-x: hidden;
}

/* Images */
#head-banner-img {
  border-bottom: 5px solid #222222;
  position: fixed;
}

/* Container Content */
.container {
    width: 100%;
    height: 500px;
    background-color: transparent;
    padding-top: 947px;
    font-size: 30px;
    text-align: center;
    position: relative;
}

.container > div {
    background: #2c2c2c;
    height: 100%;
    padding: 50px;
    box-sizing: border-box;
    color: white;
}
<img src="http://www.thestoryboardz.com/images/background.jpg" alt="Munch Banner" id="head-banner-img">
    <div class="container">
      <div>Hello</div>
    </div>

Upvotes: 1

Rachel S
Rachel S

Reputation: 3920

Set the div's image as a background image instead and give it: 

background-attachment: fixed

Upvotes: 0

Related Questions