How to fit a sticky background image and prevent overflow in css?
Finally, I figured it out!
The trick was in using grid
, it took me a while but I created this master piece!
Reference link: How to create a sticky background using css?
html,
body {
margin: 0;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
width: 100%;
background: black;
}
#rest {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background: blue;
}
#content {
width: 50%;
z-index: 0;
grid-row: 1;
grid-column: 1;
margin: 0 auto;
background: yellow;
}
#sticky_back {
width: 100%;
height: 100vh;
grid-row: 1;
grid-column: 1;
position: sticky;
top: 0;
background-image: url("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
background-repeat: no-repeat;
background-size: cover;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
<span>
psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim vennostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut alnostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut alnostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim e et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio
</span>
</div>
</div>
</body>
</html>
Fixed background image with full window stretch and fit with no repeating when scrolling?
object-fit
https://css-tricks.com/almanac/properties/o/object-fit/
it's the best choice for you that can stretch and fit 100%
.object-fit_fill { object-fit: fill }
.object-fit_contain { object-fit: contain }
.object-fit_cover { object-fit: cover }
.object-fit_none { object-fit: none }
.object-fit_scale-down { object-fit: scale-down }
https://jsfiddle.net/y3cobhp1/
& what you looking for exactly below
.object-fit_fill { object-fit: fill }
OR
.object-fit_cover { object-fit: cover }
https://jsfiddle.net/y3cobhp1/1/
Keep background image fixed during scroll using css
background-attachment: fixed;
http://www.w3.org/TR/CSS21/colors.html#background-properties
CSS Image size, how to fill, but not stretch?
You can use the css property object-fit
. ("sets how the content of a replaced element, such as an <img>
or <video>
, should be resized to fit its container.")
.cover {
object-fit: cover;
width: 50px;
height: 100px;
}
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
CSS background-size: cover + background-attachment: fixed clipping background images
Unfortunately this is simply an artifact of how fixed positioning works in CSS and there is no way around it in pure CSS - you have to use Javascript.
The reason this happens is due to the combination of background-attachment: fixed
and background-size: cover
. When you specify background-attachment: fixed
it essentially causes the background-image
to behave as if it were a position: fixed
image, meaning that it's taken out of the page flow and positioning context and becomes relative to the viewport rather than the element it's the background image of.
So whenever you use these properties together, the cover
value is being calculated relative to the size of the viewport irrespective of the size of the element itself, which is why it works as expected when the element is the same size as the viewport but is cropped in unexpected ways when the element is smaller than the viewport.
To get around this you basically need to use background-attachment: scroll
and bind an event listener to the scroll
event in JS that manually updates the background-position
relative to how far the window has been scrolled in order to simulate fixed positioning but still calculate background-size: cover
relative to the container element rather than the viewport.
CSS background image - shrink to fit fixed size div
You're looking for background-size: contain
(see the MDN entry), not cover
. To get your example to work, you'll have to drop the background-attachment: fixed
. Use background-position: center
to center the background in your div
.
.container{
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 150px;
width: 300px;
}
<div class="container">
</div>
Related Topics
Arabic Characters from HTML Content to PDF Using Itext
CSS Text Underlining Too Long When Letter-Spacing Is Applied
Understanding Grid Negative Values
Add Outward Curving Border to Elements Like This: ◝◟_◞◜
How to Change the Inner White Color of Font Awesome's Exclamation Triangle Icon
Remove ':Hover' CSS Behavior from Element
How to Strike Through Obliquely with CSS
How to Set the Thumbnail Image on HTML5 Video
Bash Script to Convert from HTML Entities to Characters
Vertically Centering a Div in Body
Why Should One Add Id to Their HTML Tags
Some Elements Missing While Downloading from Httpwebrequest
Convert Attributed String, To, "Simple" Tagged HTML
How to Handle HTML5 Constraint Validation Pop-Up Using Selenium
How to Use the Z-Index Properly
How to Render a Field Request Without Refreshing the Page