Reputation: 195
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 above image is static image. what kind of image I want is pasted below
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
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