Aravinda KS
Aravinda KS

Reputation: 195

Scrolling in CSS, Page not fitting correctly, Scrolling effect

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>

Upvotes: 5

Views: 134

Answers (1)

Chris Happy
Chris Happy

Reputation: 7295

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>

Upvotes: 1

Related Questions