[Resolved] Lazy load of section background?

[Theo]

Hi, I’d like to know how I can get the lazy load-function of WP Rocket to “pick up” the background image of a page section. It currently does not lazy load this image. On https://docs.wp-rocket.me/article/130-manually-apply-lazyload-to-an-image they show how to do this in html or php, but I’m not sure if that’s the way your section backgrounds work. Would you be able to share how to approach this?

[Tom]

Hi there,

The section background is using a background image (not a static image), so I’m not sure it’s possible (at least with the method above).

[Theo]

Hi Tom, thanks. Too bad. These are actually some WP Show Posts images on a dark image background. Could you perhaps please give me an idea of how to use the shortcode if I just create a div with an img for the image and an img::after for the dark overlay? Because the normal img would be seen by WP Rocket and would probably lazy load. I’m not sure what I need to do to get a correctly positioned, responsive WP Show Post overlaid on such a div. Sorry, probably beginner’s question…

[Tom]

So you’d load the background image as a static image, but position: absolute it so it stays behind the posts?

[Theo]

Hi Tom,

Yes, thanks for that. With some css here and there the Show Posts and dark overlay basically worked for desktop and tablet, but the “background” image doesn’t expand/zoom vertically on mobile to fill the increased vertical area behind the stacked mobile layout of WP Show Posts.

img in the div set to
display: block;
max-width: 100%;
height: auto;

Any tips?

For now, I reverted to the section background image but switched to a low-quality jpg with smaller file size.

[David]

Hi There,

i am thinking this could be a responsive nightmare, even if we used object-fit to ensure the image always filled its container. But we can give it a shot.
Could you remove the background image and place it inside the section after the WP Show post shortcode?

[Theo]

Hi David,
Hmm, that doesn’t seem to change things, neither the object-fit nor switching html instructions before/after the img. I added object-fit:contain to the parent div but no change for the mobile layout:
.lazy-load-image-background {
position: relative;
padding: 0;
margin: 0;
object-fit:contain;
}

css for the rest (the WP Show Posts being in a nested div with class lazy-load-image-background-posts:
.lazy-load-image-background img {
display: block;
max-width: 100%;
height: auto;
}
.lazy-load-image-background:after {
content: “”;
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 100%) repeat 0 0;
z-index: 1;
}
.lazy-load-image-background-posts {
display: block;
position: absolute;
width: 100%;
left: 0;
top: 10%;
padding: 1em;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

If you have a bright idea, I’m all ears. If you believe this could indeed become a responsive nightmare, then I’m ok with dropping this. The low-quality section background is small enough to not significantly impact page load speed.

[Tom]

I’m still seeing the image added as a background image? Did you switch it back?

If the file is small enough, it likely won’t make a massive difference. The fact that you’re lazy loading all of the other static images will make a big difference though.

[Theo]

Hi, since this is a development site I just added a new section at the bottom of the page with this new approach. Please have a look for a few seconds if you have some time.

Indeed, the section background file is now small enough to not make a big difference. So we could close the topic, it’s just for curiosity’s sake that we could perhaps try to resolve the other approach.

[Tom]

So I would set up your HTML like this:

<div class="lazy-load-image-background-container">
    <div class="lazy-load-image-background-posts">
        WP Show Posts in here.
    </div>
    <div class="lazy-load-image-background">
        Background image in here.
    </div>
</div>

Then this would be your CSS:

.lazy-load-image-background-container {
    position: relative;
    overflow: hidden;
}

.lazy-load-image-background:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0) linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 100%) repeat 0 0;
    z-index: 9;
    right: 0;
    bottom: 0;
}

.lazy-load-image-background-posts {
    padding: 1em;
    z-index: 10;
    position: relative;
}

.lazy-load-image-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

[Theo]

Hi Tom,

Thanks, that almost works: the gradient expands nicely behind the WP Show Posts on mobile stacked display, but the image still doesn’t. Maybe I’m doing something wrong, it’s just a simple

instruction.

I suggest we close the topic, unless you feel creative. I’ll continue using the normal section background with a low-quality image. No lazy load, but the file is small enough to not slow down page load.

[Theo]

Oups, that strips out the html. Another try:

img src=”..xx.jpg”

[Tom]

What if you add this as well?:

.lazy-load-image-background img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

[Theo]

Tip of the hat, Sir! Thank you for getting creative, Tom! The CSS wizard taught the pupil a few new tricks…

[Tom]

Glad I could help! 🙂

[Author]

Posts