CODEWITHSUNDEEP
htmlcssbootstrap-4background-imagebackground-attachment
Rebekah Jarrett
Rebekah Jarrett

Reputation: 11

Jumbotron Fixed Image Jumps

I'm coding a website for a friend, but the jumbotron background image keeps jumping when I scroll down the page. Can someone please explain to me what I am doing wrong? Thank you.

Codepen link here: https://codepen.io/Bekahlea/pen/bGqNaVo

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-image: url("../images/microphone-1074362_1920.jpg");
  height: 500px;
  background-attachment:fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.3rem;
  color: white;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

Upvotes: 1

Views: 48

Answers (2)

Rebekah Jarrett
Rebekah Jarrett

Reputation: 11

Solved by removing: border-radius: 0.3rem; as suggested by Ali Klein.

Upvotes: 0

Ali Klein
Ali Klein

Reputation: 1908

Your code seems to be working fine:

body {
  height: 200vh;
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  height: 500px;
  background-image: url("https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.3rem;
  color: white;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

Upvotes: 0

Related Questions