Nuxt3 CSR Background Image Lazy loading

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…


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


Print Share Comment Cite Upload Translate Updates
APA

Nick Milillo | Sciencx (2024-06-20T02:43:38+00:00) Nuxt3 CSR Background Image Lazy loading. Retrieved from https://www.scien.cx/2024/06/20/nuxt3-csr-background-image-lazy-loading/

MLA
" » Nuxt3 CSR Background Image Lazy loading." Nick Milillo | Sciencx - Thursday June 20, 2024, https://www.scien.cx/2024/06/20/nuxt3-csr-background-image-lazy-loading/
HARVARD
Nick Milillo | Sciencx Thursday June 20, 2024 » Nuxt3 CSR Background Image Lazy loading., viewed ,<https://www.scien.cx/2024/06/20/nuxt3-csr-background-image-lazy-loading/>
VANCOUVER
Nick Milillo | Sciencx - » Nuxt3 CSR Background Image Lazy loading. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/20/nuxt3-csr-background-image-lazy-loading/
CHICAGO
" » Nuxt3 CSR Background Image Lazy loading." Nick Milillo | Sciencx - Accessed . https://www.scien.cx/2024/06/20/nuxt3-csr-background-image-lazy-loading/
IEEE
" » Nuxt3 CSR Background Image Lazy loading." Nick Milillo | Sciencx [Online]. Available: https://www.scien.cx/2024/06/20/nuxt3-csr-background-image-lazy-loading/. [Accessed: ]
rf:citation
» Nuxt3 CSR Background Image Lazy loading | Nick Milillo | Sciencx | https://www.scien.cx/2024/06/20/nuxt3-csr-background-image-lazy-loading/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts