Css - Scrollable hero-image

duebcio
July 22, 2024
190 views
0 votes
2 Answers

I have made a simple background in Figma (1920×1600) and I want to place it as a hero image. But the problem is that the screen resolution can be 1920×800. I also want to place some content on the page. I want when user scrolls down the background would scroll until 1600 height and then it would scroll only the content.
Here’s the simple example:
I have an image from Figma image
then I import it as PNG export output

I wrote a CSS script to use it as a background:

body {
  overflow-y: hidden;
  margin: 0;
}

.background_container {
  background-color: #444444;
  background-image: url("https://i.sstatic.net/mL8LVRMD.png");
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="background_container">

  </div>

  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>

  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>
  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>
  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>
  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>
  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>

</body>

</html>

and when I try to open this page I can see the top part of it but it does not let me to scroll it down even with the content:

result

Answers

body {
  overflow: hidden;
  margin: 0;
}

.background_container {
  background-color: #444444;
  background-image: url("https://i.sstatic.net/mL8LVRMD.png");
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="background_container">

  </div>

  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>


</body>

</html>

This is the closest I could do… hope it helped you.
(make full screen to see the result)

    document.addEventListener('scroll', () => {
      const backgroundContainer = document.querySelector('.background_container');
      const scrollTop = window.pageYOffset;
      const maxScroll =1600-window.innerHeight;

      if (scrollTop <= maxScroll) {
        backgroundContainer.style.transform = `translateY(${scrollTop}px)`;
      } else {
        backgroundContainer.style.transform = `translateY(${maxScroll}px)`;
      }
    });

  body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
}

.background_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1600px; 
  background-image: url("https://i.sstatic.net/mL8LVRMD.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="background_container"></div>
  <div class="content">
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
    <p class="txt">Example1</p>
    <p class="txt">Example2</p>
    <p class="txt">Example3</p>
    <p class="txt">Example4</p>
    <p class="txt">Example5</p>
    <p class="txt">Example6</p>
    <p class="txt">Example7</p>
    <p class="txt">Example8</p>
    <p class="txt">Example9</p>
  </div>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Scrollable hero-image

Answers