Sorry cshoredaniel I meant frjo’s code. I must be in an altered state of consciousness because I perceived your messages as coming from one person 
Now it works frjo, your code did the trick:
style="background:url(/Images/spirituality/mythology/freyr_freiya_drawing_hua7f350cae9680fd00478216ab96f7a4d_1316858_200x0_resize_q75_h2_mitchellnetravali_2.webp);background-size:cover;background-repeat:no-repeat"
Probably the other small mistakes corrected after stopped it from doing it should have.
Ok technically my issue is solved, I wrote what I wanted.
But as far as getting background LQIP images and not having any CLS (eventhough my lighthouse score is 100% and 97%), it’s done yet. I don’t see the background.
Any idea how I can check that it appears ? Can I deactive the img object somehow but keep the css style (background) associated with it ?
So as to know if the background styling is even rendered.
Use DevTools ‘device emulation’ and enabling throttling to ‘slow 3G’ and do a no-cache refresh (typically by pressing the Shift key will clicking the refresh button). You should briefly see the background image.
A way to check that doesn’t use the live image tag would be the apply the same style to a <div> on which you set a width and height. That should show the background image.
The first tests the actual HTML you will use, the second is not time sensitive but is not the actual HTML.
DevTools options may allow discarding foreground but not background images, but I’ve never looked for that, so don’t really know.
Nice. I didn’t know that object-position existed, and it’s not even new!
it should logically be ideal but does not work for some reason. inline or external style, with “0 0” or “5% 5%”, no change. Removing the src and srcset attributes also do not make the background appear. not even an empty place.
With width:fit-content in img, what appears is usually smaller than with width:100%, but it’s always very small anyway. the sizes html attribute or width and height are not read, instead it seems to always fit something like the intrinsic size of the background, not what I tell him to. I tried several different height and width. I thought html attributes took precedence over styling ?
I try with a firefox-based browser…
If you wish to bypass the protection provided by Go’s html/template package, redefine the HTML output format in your site configuration:
[outputFormats.HTML]
isPlainText = trueYour sample functions, yes, so it has to be my CSS sheet that interferes.
Btw, there’s an issue with internal templates and IsPlainText.
Yeah, I don’t use any of the internal templates. If you want to pursue this, turn them into local partials. Source: https://github.com/gohugoio/hugo/tree/master/tpl/tplimpl/embedded/templates
background images still don’t work as LQIP, it seems that loading=lazy delay loading the entire object, background included. I could verify that the CLS persists.
I’ll see with the forum member who wrote those LQIP modules.
You can’t lazy-load an image set as a css background. Solution, don’t use the background: property, just use an image tag.
I’m 99% sure this is not a purely decorative image anyway, so it is not appropriate to use the background property.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.