Yes, this seems to work*. O_o
See the Pen
Image with Background Image (yes you read that right) by Tom (@webrocker)
on CodePen.
I wondered if I could use a background image for a transparent png I used in a recent blog post, and decided to give it a try and not making a wrapper around the img, but add the "background-image" style directly to the img tag.
Imagine how surprised I was to see that this works, (*at least on Firefox, Chrome and Safari on macOS 10.15.6 and Safari on iOS 13.5.1).
.fancyimg { padding: 5vh 15vw; background-image: url(http://placekitten.com/600); background-size: cover; } |
Here's a screenshot of the result (Firefox 79.0, macOS 10.15.6):
This may open a whole new bunch of opportunities for example if the img src couldn't be loaded and a fallback/placeholder should be displayed.
7 Reaktionen zu “img with background-image”
It's cats all the way down.
hmmm ... black-cats only .... Win10/Chrome and Win10/FF ... only alt-Text ?
I have only checked in Firefox, Chrome, Safari Mac 10.15.6 currently
Kommentare sind geschlossen.