Set a scrollable background image
Clash Royale CLAN TAG#URR8PPPSet a scrollable background image
I currently have this fiddle :
https://jsfiddle.net/0g3u8452/1/
I have a 1920x4000 image, and I would like it to take the full width of the screen just like the
background-size: cover
but since the image has an important height, I'd like to be able to scroll down to keep seeing it
I made a picture of the result i'm trying to get :
Thank you in advance for any help :)
3 Answers
3
Try using <img> with position: absolute as a background instead?
<img>
position: absolute
.container {
position: relative;
}
.container img.background-img {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}
body {
padding: 0;
margin: 0;
}
<div class="container">
<img src="http://via.placeholder.com/1920x4000" class="background-img">
<div class="other">Other elements</div>
</div>
Perfect thank you ! Exactly what I wanted ! :)
– saperlipopette
22 mins ago
Is this what you are trying to achieve FIDDLE
.bg {
height: 4000px;
}
Are you looking for something like this? i just changed it a bit.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg">
<div class="cont"></div>
</div>
</body>
</html>
body,
html {
height: 100%;
margin: 0;
}
.bg {
height: 100%;
width: 100%;
}
.main {
width: 100%;
height: 100%;
}
.cont {
width: 100%;
height: 4000px;
background-image: url("http://via.placeholder.com/1920x4000");
}
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Hi @GopalGarva, with this property, I'm not able to scroll at the bottom of my picture :(
– saperlipopette
23 mins ago