CODEWITHSUNDEEP
htmlcssfooter
komko
komko

Reputation: 112

Make footer under cover sized image

I am making a website and I stumbled upon a little problem. I have the image set to be to height: 100% and width; and background-size: cover;

Is there any way I can make the footer appear so that you scroll UNDER the image?

.bg {
  /* The image used */
  background-image: url("./Resources/home_bg.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

HTML code looks like:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="bg"></div>

  </body>

</html>

Upvotes: 0

Views: 899

Answers (1)

Alex
Alex

Reputation: 151

It sounds like you only need to add a z-index to your divs.

The footer would have the smaller number z-index, while .bg is the larger one.

Also, I added a container and gave the footer a background color to just show the effect that I think you're going for.

.bg {
  /* The image used */
  background-image: url("http://placehold.it/400x400");

  /* Full height */
  height: 100vh;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 10;
}

footer {
  background: #ff0000;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 8;
 }
 
 .container {
 height: 105vh;
 }
<div class="container">
  <div class="bg">BG</div>
  <footer>footer</footer>
</div>

Upvotes: 2

Related Questions