The Mounted Background Attachment Hack

No Comments

What choices do you may have if you need the physique background in a hard and fast place the place it stays placed on scroll? background-attachment: fastened in CSS, at finest, doesn’t work properly in cellular browsers, and at worst is not even supported by probably the most extensively used cellular browsers. You’ll be able to ditch this concept fully and let the background scroll on small screens utilizing media queries.

Or get round it with a small repair. I suppose we might name it a “hack” because it’s a workaround in code that arguably we shouldn’t should do in any respect.

The problem

Earlier than I present you the repair, let’s look at the problem. We will see it by taking a look at two completely different approaches to CSS backgrounds:

a background utilizing a linear gradienta background utilizing a picture

Linear gradient

I need to maintain the background gradient in a hard and fast place on scroll, so let’s apply fundamental CSS styling to the physique that does precisely that:

physique {
background: linear-gradient(335deg, rgba(255,140,107,1) 0%, rgba(255,228,168,1) 100%);
background-attachment: fastened;
background-position: heart;
background-repeat: no-repeat;
peak: 100vh;
}

Listed here are the ends in Chrome and Firefox, each on Android, respectively:

Chrome Android
Firefox Android

The gradient merely scrolls together with different content material then jumps again. I don’t know precisely why that’s — possibly when the URL tab goes up or disappears on scroll and the browser finds it tough to re-render the gradient in actual time? That’s my finest guess because it solely appears to occur in cellular browsers.

When you’re questioning about iOS Safari, I haven’t examined on iOS personally, however the challenge is there too. Some have already reported the problem and it seems to behave equally.

Background picture

This challenge with photographs is not any completely different.

physique {
background: url(../belongings/test_pic.jpg);
background-repeat: no-repeat;
background-size: cowl;
background-position: heart;
background-attachment: fastened;
peak: 100vh;
}

The gray part on the high simply signifies the presence of an precise URL bar in Chrome Android.

One other fascinating factor to notice is that when background-attachment: fastened is utilized, the peak is ignored even when we explicitly specify it. That’s as a result of background-attachment calculates a hard and fast background place relative to the viewport.

Even when we are saying the physique is 100vh, background-attachment: fastened shouldn’t be precisely in accordance with it. Bizarre! Maybe the reason being that background-attachment: fastened depends on the smallest attainable viewport whereas components depend on the largest attainable viewport. David Bokan explains,

Lengths outlined in viewport models (i.e. vh) is not going to resize in response to the URL bar being proven or hidden. As a substitute, vh models can be sized to the viewport peak as if the URL bar is all the time hidden. That’s, vh models can be sized to the “largest attainable viewport”. This implies 100vh can be bigger than the seen peak when the URL bar is proven.

The problems are properly documented over at caniuse:

Firefox doesn’t seem to assist the native worth when utilized on a textarea aspect.Chrome has a problem that happens when utilizing the will-change property on a selector which additionally has background-attachment: fastened outlined. It causes the picture to get lower off and acquire whitespace round it.iOS has a problem stopping background-attachment: fastened from getting used with background-size: cowl.

Let’s repair it

Name it a brief hack, if you’ll. A few of you could have already tried it. Regardless of the case, it fixes the linear gradient and background picture points we simply noticed.

So, as , we’re getting in bother with the background-attachment: fastened property and, as you may need guessed, we’re eradicating it from our code. If it’s wanting on the smallest attainable viewport, then possibly we ought to be working with a component that appears for the largest attainable viewport and place that as a substitute.

So, we’re creating two separate components — one for the background-gradient and one other for the remainder of the content material. We’re changing background-attachment: fastened with place: fastened.

<div class=”bg”></div>
<div class=”content material”>
<!– content material –>
</div>

.bg {
background: linear-gradient(335deg, rgba(255,140,107,1) 0%, rgba(255,228,168,1) 100%);
background-repeat: no-repeat;
background-position: heart;
peak: 100vh;
width: 100vw;
place: fastened;
/* z-index utilization is as much as you.. though there isn’t any want of utilizing it as a result of the default stack context will work. */
z-index: -1; // that is elective
}

Now, wrap up the remainder of the content material — aside from the aspect containing the background picture — inside a essential container.

.content material{
place: absolute;
margin-top: 5rem;
left: 50%;
remodel: translateX(-50%);
width: 80%;
}

Success!

Chrome Android
Firefox Android

We will use the identical trick hack with background photographs and it really works wonderful. Nonetheless, you do get some kind of background scrolling when the URL bar hides itself, however the white patch is not there.

.img {
background: url(‘../belongings/test_pic.jpg’);
background-position: heart;
background-repeat: no-repeat;
background-size: cowl;
place: fastened;
peak: 100vh;
width: 100vw;
}

.content material {
place: absolute;
left: 50%;
margin-top: 5rem;
remodel: translateX(-50%);
width: 80%;
}

Chrome Android
Firefox Android

Listed here are my takeaways

A set-position aspect with a peak set to 100% behaves identical to the aspect with background-attachment: fastened property, which is clearly evident within the instance beneath! Simply observe the right-most bar (purple shade) within the video.

The web site which is being examined is taken from this text.

Regardless that, David Bokan in his article states that:

That’s, a place: fastened aspect whose containing block is the ICB will resize in response to the URL bar exhibiting or hiding. For instance, if its peak is 100% it’s going to all the time fill precisely the seen peak, whether or not or not the URL bar is proven. Equally for vh lengths, they can even resize to match the seen peak taking the URL bar place under consideration.

If we consider that final sentence, that doesn’t appear to be the case right here. Components which have fastened positioning and 100vh peak don’t change their peak whether or not the URL bar is proven or not. Actually, the peak is based on the peak of the “largest attainable viewport”. That is evident within the instance beneath. Simply observe the sunshine blue coloured bar within the video.

The web site which is being examined is taken from this text.

So, it seems that, when working with a container that’s 100vh, background-attachment: fastened considers the smallest attainable viewport peak whereas components basically contemplate the largest attainable viewport peak.

For instance, background-attachment: fastened merely stops working when a repaint is required, like when a cellular browser’s deal with bar goes away on scroll. The browser adjusts the background based on the biggest attainable viewport (which is now, in reality, the smallest attainable viewport as URL bar is hidden) and the browser isn’t environment friendly sufficient to repaint on the fly, which ends up in a serious lag.

Our hack addresses this by making the background a component as a substitute of, properly, an precise background. We give the aspect containing the content material an absolute place to stack it on high of the aspect containing the picture, then apply a hard and fast place on the latter. Hey, it really works!

Word that the viewport peak is calculated excluding the navigation bar on the backside (if current). Right here’s a comparability between the presence and absence of navigation bar on the backside in Chrome Android.

Is there a draw back? Maybe! We’re utilizing a common <div> as a substitute of an precise <img> tag, so I wouldn’t say the markup is semantic. And that may result in accessibility points. When you’re working with a picture that provides that means or context to the content material, then an <img> is the right approach to go, using a correct alt description for display screen readers.

But when we go the right <img> route, then we’re proper again the place we began. Additionally, when you’ve got a navigation bar on the backside which too auto hides itself, then I can’t assist it. If the hack gained’t lower it, then maybe JavaScript can come to the rescue.

The submit The Mounted Background Attachment Hack appeared first on CSS-Tips. You’ll be able to assist CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment