Making an image be behind divs so divs scroll over images

Sonny 0
Viewed 32

I am sorry for phrasing this poorly. Don't really know how to explain it but I have images of what I want to achieve.

I want to learn how to implement stuff like this

enter image description here

enter image description here

I don't fully understand the css behind it and don't know what to google on. I've been looking up stuff on parallax ads but I cant find this behaviour explained anywhere. If anyone has some resources I can read I'd appreciate it a lot. I understand the background image has to have a lower z-index than rest of content on a site, but the rest I dont fully grasp.

Would appreciate any pointers.

css html
2 Answers

use background-image property in CSS, for that specific div or section, check out the documentation on Mozilla or w3schools

Is-haq Adnan0

Just Need to make the image position:absolute; and z-index:-10; or more depends on if you are using z-index in any case.it will take the image out of the html flow. now you can write the html as you would normally do.it would stay in the background..

div{
height:100px;
width:100px;
outline:1px solid red;
color:white;
}
img{
position:absolute;
top:0;
left:0;
z-index:-10;
}
<img src="https://images.unsplash.com/photo-1663832669528-df3f45bce473?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>

UmairFarooq0
Related