CODEWITHSUNDEEP
htmlcss
Raven Van de Werken
Raven Van de Werken

Reputation: 1

How to add one long scrollable image into HTML/CSS?

(Beginner question) Hello, I'm trying to create a site that has one long image as a background that you can scroll. Nothing fancy, just one image of 1920x3740 of which you can only see a viewport-sized section of. I added an image to clarify what I mean. one big iamge with the viewport scrolling through it

I've tried using multiple divs under each other of 1920x1080, and chopped the image up to fit correctly, which kind of worked, but they wouldn't stay 16x9 so the edges of each image didn't match up. Now what i've got is one big image but I can't scroll it.

HTML:

<div class="bgImageFull"></div>

CSS:

.bgImageFull{
  background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

This also goes before but I don't think it does anything for my issue:

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

html, body{
  height: 100%;
  font-family: 'functionPro';
}

Upvotes: 0

Views: 1417

Answers (1)

BagMan
BagMan

Reputation: 66

.bgImageFull {
    background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
    height: 3740px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

Height: 100%; Could be what's messing this up for you.

It might be better to specify the actual height of your image in the image's class. 100% is just going to cover the available height of the parent element.

Upvotes: 1

Related Questions