Skip to content Skip to sidebar Skip to footer
Home / Background / Background Image / Css / Html

CSS Background Image That Can Scroll

Post a Comment
I am trying to create a background image that will have a scroll bar to scroll the image down vertically. I like the idea of using width and height percentages because it seems li

Solution 1:

UPDATE: without height you can't scroll the image top to bottom. but you cant fit this any screen. 

body,html {

  margin: 0;
   
}

.image {
  background-image: url("http://www.w3schools.com/howto/img_parallax.jpg");
  background-position:center;
  background-size: 100% 100%;
  
  height:300vh;
  
  }
<body>

   <div class="image">

 </div>
</body>

Solution 2:

A scroll bar moves the viewport so that you can see what's not on the screen. At the above code, if you make your image to expand&contract by giving it relative height (%100 height&width of the screen), there will never be a 'scroll-able' vertical scroll bar because there's nothing to scroll to. It never 'overflows'.

To actually have scroll-able images, you need to give it a width - or in this case- height larger than your viewport.


Post a Comment for "CSS Background Image That Can Scroll"