image() - taking background-images to the next level

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:27 - Collaboration with 21 Days of Web
00:50 - This video is a little different
01:28 - How I learn something new about CSS
06:40 - Image Fragments
09:06 - Image directionality
10:49 - Solid color fallbacks

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[UweKeim]

Found your channel some month ago. Being a C# developer, I love watching you explaining CSS things. I do like it a lot that your videos starts right away with actual content. That's different to much of the other channels I'm watching. So thanks a lot for your pragmatic, entertaining, valuable videos 🙂

[wpeasy]

Always interesting. Since discovering aspect-ratio, object-position and object-fit, I have pretty much stopped using CSS backgrounds. So much better control and better for accessibility.
Always good to have more options to consider.

[askmehowi]

You made me fall in love with css, we have our fights but at the end of the day I love it 😊

[captuhu]

if you want to play around with the xywh syntax of image() there is something very similar as part of object-view-box that is currently (DEC 2022) behind a flag in chrome

[meganweber]

I hope they add parent-size-relative units. We'd be able to do much more really cool stuff. All we can do now is set width relative to width of parent and height relative to height of parent.

[gametroll]

As I once said before, it is nice with all these new CSS features coming out. The disappointment I have is that it's going to take 10-15 years before you can really use it in a real world production project, even if all the browsers were to pick up support for this today... Yes it would take that long for most people to update their browsers to the latest version that supports such a feature. That's what I hate about the non-forced browser updating we have to deal with.

[detroitluv]

I need a "make the internet more awesome" Hoodie in a size 3x!

[ThePhatLe]

on sass i darken images making example background: lineargradiant(dark-bg, dark-bg) url("random.jpg") no repeat
on this situation dark-bg has rgba(17, 17, 17, 0.7) and now my image has tinted lightly darker. lineargradient i like to use for making upper image fading more etc if needed.

[vigintillion]

love your content! keep up the great work!

[JimKernix]

Have you done a video on sprites? Why and when and how to use them?

[farukdee]

6:25 No Kevin, I don’t want to go down that rabbit hole of learning. That’s why I came to you.

[vedantkanoujia]

Sir, I want to know that if you do projects on react or just on html, css, js

[chase-bank]

Middle click to open in new tab... my god. How did I not know this!

[Stoney_Eagle]

Why do you always show us the most coolest new features that I desire to implement right away but can't😭 This is torchure 😂
I use the sprite position syntax for my video player time bar hover preview with a complex script, if only I can switch that to a simple set style statement directly 😱🤯🥰

[alsherifkhalaf]

I am happy to see Arabic in your tutorial ✌️
It is very helpful video for me, big thanks ❤️

[vadim.gerasimenko]

The description has the wrong link pointing to Image() constructor docs instead of css image() function

[xReTuneSx]

I have a question: If a new Feature is supported now, do you have to have the newest Browserversion? Or is it just available to all?

[jahanzaibhaider]

this concept was amazing thank you sir..

[dankierson]

Interesting - even though we can't yet see the final effects.
Kevin, about this image fragment thing. There has been for years a thing called an *image sprite* which is basically a big image made from montaging several individual images. The idea is that on page load you download just 1 image file. And, whenever you want to render one of the individual images on a site page, you just specify
1. the sprite src; and
2. the coordinates of that part of the sprite which bound the image you want to show.
The performance benefit of loading one single sprite file for all images rather than as many files as images is obvious.
Or at least that was the _idea_ of image sprites.
Personally I could not ever get sprites to work right 😔. Maybe this new image(...) property might swing it.

[xBZZZZyt]

04:12 how can screen reader read an image?