- The background-attachment property in CSS is used to control how a background image behaves when scrolling the content of an element. It specifies whether the background image is fixed or scrolls along with the content.
- Program 1: background-attachment: scroll;
- if we define background-attachment is scroll, then:
- inside scrolling, only content scroll but background isn't scroll.
- outside scrolling, content and background both scroll.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 250px;
height: 200px;
border: 5px solid rgb(0, 255, 8);
overflow-y: scroll;
}
.subcontainer {
width: 200px;
height: 400px;
border: 1px solid white;
overflow-y: scroll;
color: white;
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-attachment: scroll;
}
</style>
</head>
<body>
<div class="container">
<div class="subcontainer">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus eveniet amet, dignissimos tempore
nesciunt
non iusto quae ullam fuga consectetur possimus aperiam recusandae ad dicta sint pariatur, repudiandae
laboriosam. Saepe quod consequatur reprehenderit quam consectetur perferendis optio quas illo eum culpa?
Possimus, modi. Sint illo illum eligendi consectetur? Unde, aut. Repudiandae ut deleniti illo quos minima
fuga
fugit, provident at dolore praesentium suscipit libero quidem consequuntur nihil esse vel? Accusamus
mollitia
rerum aliquam necessitatibus veritatis eligendi, magnam sint accusantium voluptas modi! Nulla inventore nisi
vel
reprehenderit facere, quae necessitatibus culpa delectus officiis nostrum accusantium dolorem id! Facere id
officia numquam quam dolor qui error! Maiores voluptatum ratione provident quaerat fugiat? Expedita odit
illo
temporibus aperiam praesentium omnis ratione consequuntur saepe amet dolores aspernatur explicabo dolorum
sunt,
facere, quis non animi molestiae! Facere, exercitationem. Voluptatum ducimus commodi ratione accusantium
alias
itaque eius repellat, provident non, consequuntur nam perspiciatis ad. Unde obcaecati doloremque iusto? In,
fugit. Eveniet eaque perspiciatis, aut tempore iste repudiandae obcaecati praesentium ad asperiores iure,
reiciendis ea pariatur quibusdam illo ab. Obcaecati tempora consequatur et mollitia quae suscipit aliquam
deserunt molestiae magni nisi repellat illo, dicta, omnis dolorem hic culpa aliquid nostrum aspernatur sint
reprehenderit quibusdam, consequuntur ipsam eveniet?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium tempora pariatur asperiores repellat
natus perspiciatis vitae beatae, quam, non libero sapiente ut porro maiores doloribus molestias in
recusandae quo consectetur?
</div>
</div>
</body>
</html>
- Output:
- Program 2: background-attachment: local;
- if we define background-attachment is local, then:
- inside scrolling, content and background both scroll.
- outside scrolling, content and background both scroll.
.subcontainer {
width: 200px;
height: 400px;
border: 1px solid white;
overflow-y: scroll;
color: white;
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-attachment: local;
}
- Program 3: background-attachment: fixed;
- if we define background-attachment is fixed, then:
- inside scrolling, only content scroll but background isn't scroll.
- outside scrolling, only content scroll but background isn't scroll.
.subcontainer {
width: 200px;
height: 400px;
border: 1px solid white;
overflow-y: scroll;
color: white;
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-attachment: fixed;
}
No comments:
Post a Comment