CSS background image that can scroll

0 votes

I'm attempting to make a backdrop image that can be scrolled down vertically using a scroll bar. Using width and height percentages looks like a good idea because it seems to always fit the image to any screen resolution. Unfortunately, the image's length is quite long, and as a result, the bottom of the image is omitted. Changing the background-size attributes, utilizing overflow-y: scroll, and other adjustments that are not worth discussing are just a few of the methods I tried to get this functioning. Here is the code I have so far written:

<!doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
</head>

<body>
<div class='image'></div>
</body>

</html>

CSS

@charset "UTF-8";
/* CSS Document */
body { 
    margin:0;
}
.image {
    position:absolute;
    width:100%; 
    height:100%;
    background:black;
    background-image:url(../pictures/testjpg);
    background-size:cover;
    overflow-y: scroll;
}
Jul 5, 2022 in CSS by Edureka
 • 13,620 points • 1,794 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27, 2022 in CSS by Edureka
 • 12,690 points • 632 views
0 votes
1 answer

Position a CSS background image x pixels from the right?

The attribute border can be used as ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
 • 12,690 points • 933 views
0 votes
1 answer

How to use CSS media query to scale background-image to viewing window

If you only want the desktop version ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
 • 12,690 points • 1,331 views
0 votes
0 answers

CSS gradients vs background Image?

What is the difference between CSS gradients ...READ MORE

Jun 22, 2022 in CSS by Edureka
 • 13,620 points • 509 views
0 votes
0 answers

Fading in a background image using javascript or css on hover

I have so far been able to ...READ MORE

Jun 30, 2022 in CSS by Edureka
 • 13,620 points • 1,099 views
0 votes
0 answers

Make a full screen CSS background image appear "behind" a mobile keyboard

I've set an HTML/CSS full-screen background image ...READ MORE

Jul 18, 2022 in CSS by Edureka
 • 13,620 points • 1,194 views
0 votes
1 answer

When to use IMG vs. CSS background-image?

You can transition a div's background image ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
 • 12,690 points • 891 views
0 votes
0 answers

CSS: background image on background color

If this panel is chosen, a panel ...READ MORE

Jun 22, 2022 in CSS by Edureka
 • 13,620 points • 548 views
0 votes
0 answers

Stretch background image css?

<td class="style1" align='left' height='35'> <div style='overflow: ...READ MORE

Jul 11, 2022 in CSS by Edureka
 • 13,620 points • 699 views
0 votes
0 answers

CSS background image URL path

Hello, I'm attempting to utilise CSS to ...READ MORE

Aug 10, 2022 in CSS by Edureka
 • 13,620 points • 1,149 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP
"PMP®","PMI®", "PMI-ACP®" and "PMBOK®" are registered marks of the Project Management Institute, Inc. MongoDB®, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.