Parallex effect repeats image

user_15873530 0
Viewed 26

I created a parallax effect yesterday and thought it worked great. Today I resized my browser and saw my picture I used repeated itself. no-repeat destroyed the whole thing.

So I tried a lot of things but couldnt get anything to work. Here is an example of what happened: https://imgur.com/a/6XIurKS

.pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2.28/1;
  background: url('pictures/Coldcreekranch\ Faistenau\ Slider.jpeg');
  background-attachment: fixed;
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap">
  <link rel="stylesheet" href="index.css">
  <link rel="icon" type="image/x-icon" href="pictures/ccr_logo.ico">
</head>

<body>
  <nav class="navbar"></nav>

  <main>
    <div class="pic" id="parallax">
      <h1></h1>
    </div>
    <div class="text">
      <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>
    </div>
  </main>

  <script src="scripts/parallax_main.js"></script>

</body>

parallax css html
1 Answers

The problem is that you have added a fixed aspect ratio to the image, which means the image will be higher when the window is wider.

There is a background-size property which may help you, for instance background-size: cover.

You can read more about it and how it works here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

user_55097090
Related