Scrolling in CSS, Page not fitting correctly, Scrolling effect

user_13908029 0
Viewed 69

For my web page, while creating the background image it is not perfectly fitting. Like i want scrolling effect but only half of the image is fit to the screen there is no scroll coming. What i am expecting is whenever you enter the landing page of the site you will get background image with scrolling effect.The below image is static

The above image is static image. what kind of image I want is pasted below

Scrolling effect image

for the second image there is scroll bar at right side. I tried all the combinations like, overflow-scroll, background-image: cover etc. How to make the background image moveable? vertically.

html{
    background: url("homepagev1.png");
    background-position: relative ;
    content: " ";
    padding: 0px 0px 0px 0px;
    transform: translateZ(-2px) scale(0.8);
    background-size: 90%;
    z-index: -1;
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    height: 10vh; 
    background-repeat: no-repeat;
}

Code snippet of Html

<body>
    <header>
        <a href="index.html" class="header-branch">pagename</a>
        <nav>
            <ul>
                <li><a href="/">HOME</a></li>
                <li><a href="/portfolio">Portfolio</a></li> 
            <a href="accounts/signup" class="webonlyversion">signup</a>                 
        </nav>
    </header>
    <footer>
    <ul class="main-link-mob">
        <li><a href="">HOME</a></li>
        <li><a href="">JOIN COMMUNITY</a></li>
   </ul>
        <ul class="main-link-web">
            <b>"BE A PART OF THE COMMUNITY AND EXPLORE NEW THINGS"</b>
            <li><a href="">SOCIAL</a></li>
            <li><a href="/aboutus">ABOUT US</a></li>
       </ul>
       <div class="footer-sm">
           <a href="#">
                <img src="{% static 'icons/gmail.png' %}" alt="gmailicon">
           </a>
           <a href="#">
              <img src="{% static 'icons/twitter.png' %}" alt="twittericon">
          </a>
          <a href="#">
            <img src="{% static 'icons/instagram.png' %}" alt="instagramicon">
          </a>          
      </div>     
  </footer>
</body>
css html
1 Answers

Like this? You can not use background-size: cover or background-size: contain, but you can still set it to 100% of the width.

body {
  background: url(https://images.pexels.com/photos/5990692/pexels-photo-5990692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-attachment: scroll;
  background-size: 100% auto;
}

div {
  max-width: 400px;
  margin: 8em auto;
  background: #ccc;
  padding: 5em;
  opacity: 0.5;
  min-height: 1000px;
}
<div> Hello </div>

user_57717500
Related