Nuxt3 CSR Background Image Lazy loading

This content originally appeared on DEV Community and was authored by Nick Milillo

I currently have background images being displayed for my pages from within the CSS. i.e.

.Inner-Page-Banner {
    width: 100%;
    height: auto;
    min-height: 280px;
    background: url(../img/trailer-owners.webp) no-repeat center top;
    margin-top: 85px;
    text-align: center;
}

I’m going through the process of performance optimisation and changing from img to NuxtImg

I’ve already changed my Background images to web however I’m wanting to know if there is a way to apply NuxtImg to the CSS or whether there is another way I should be doing this.

Thanks

This content originally appeared on DEV Community and was authored by Nick Milillo