The background values no one knows about

[@samwalker4438]

I thought Kevin was saying “hello my friend and friends” Front-End Friends makes so much more sense 😂

[@dirkvandiepen1890]

I have been thinking that for 6+ months! Even knowing what Kevin actually means it still sounds more like "hello my friend-end friends"

[@LennartKlein]

Hahaha thank you soo much for clearing this up

[@_zer09_]

accidentally found out as well when I had CC on months ago 😅

[@ivanbryukhov]

No way!!! I thought the same for years and never ever doubted it. Now it makes much more sense. My life would never be the same... Now it is so obvious! Why would he even say "friend and friends", right?

[@marcorieser]

Today I learned 😁

[@DatDat59]

Seeing repeat-x and repeat-y reminds me 2000s when we were using an image mapped to simulate shadows and radius around a block made of a table with 9 cells.

[@gizmostudios]

Oh wow that takes me back :'D Draw a button in Photoshop, add gradient, drop shadow, 9 slices and painstakingly write all the code for one button to reproduce! How much easier life's become for a web designer these days, thank god!

[@codclever]

Very thankful to have an nice coding support for our CSS and frontend issues. Love your videos man!

[@clevermissfox]

Love to learn about new obscure properties!! Background-repeat; space seems very valuable!

[@TheRealMangoDev]

thats bc it is

[@kevinphandy2]

I used this to add repeating side facing chevrons for a client. The designer had it as a leading element to various things. Used space to make it a responsive element changing the amount based on how much room there was.

[@pdizzlin]

Lol…it’s funny the number of people that hear “friend and friends”. I always heard front-end friends myself! Funny how everyone’s brain hears different things l.

[@gizmostudios]

Wait... it's not? Which one is it? I also hear Friend and Friends :'D

[@brunopanizzi]

6:10 Round is very useful for the hero section of a website that I'm making, the bg image is just a small 16 by 16 square repeating, and without round it always cropped off the last one because it's not the perfect size. Thanks for the tip, will be updating my site today!

[@joll05]

I hadn't seen round before this, and I also think it's kinda weird when it stretches the image, but I played around with it and I think I found a more practical way of using it. If you combine it with a different repeat value (for example 'background-repeat: round repeat;') then it will resize the image equally in both directions so that it fits either horizontally or vertically (depending on which one is 'round'). This means that the image won't be cropped in the specified direction, but won't be unevenly stretched either. I can see that being used in something like a long background image, where you might not want the image to be cropped off the edge of the page, but don't mind it being cropped off the bottom.

[@Korcenton]

Exactly! round repeat is perfect when you want a pattern to not crop on the x axis. It'll resize without distortion, leaving a bit of cropping at the bottom of the page -- no biggie! I'm using this for a checkerboard pattern on my site: cropping on the right would look horrible, as if you're supposed to scroll horizontally. round repeat fixes that; it's space repeat without a gap :D

[@klemensforster]

Round is actually insanely useful! Imagine all the gaming websites using the cool stone or wood sign textures that begin and end with a texture and have a repeating texture filling the space between. The distortion would not be too bad, but it would ensure the sign to always be seamless.

[@complainer406]

Until you resize the window and it jumps from 7 copies of the image to 8 Cropping seems like a better option

[@slava_trushkin]

Round option has one good use I can think of: repeating textures that have one pattern in middle and different on edges. It can also be followed by another element with a texture that fits it perfectly for edge element. I've been designing theme for RPG forum many years ago, this would have been so perfect.

[@blu3tan]

background-repeat: space is mindblowing 🤯

[@aram5642]

(In your life, find yourself a friend who'll greet you the way Kevin greets youtubers.)

[@knaughtilus]

Did a project for school last year (it was movie/cinema related) and I wanted a decorative stripe resembling an old school film roll seperating my image and text on a card. I wanted a fixed width for it so I utilized background-image. My teacher wasn't happy that the shape was cropped at the end (as background-repeat usually does) and since I didn't know the height of the card background-repeat: round; really came in handy :) Bonus was that you can use it for mask-repeat too, so i threw a nice gradient on there as well. Sorry if you can't follow my description, I'll try to put it in a codepen later if I have the time :D but I found that a very good - and until today only - use case I ever had for it.

[@CirTap]

I can see 'round' used with evenly spread grids where a background (svg maybe) "covers" the grid items which are otherwise unstylable. One could mimic border effects or separation lines between these virtual grid or flex items if the elements themselves are irregular but evenly spaced out. I recall a mini gallery where I had to mess with linear gradients and custom props to get simple separation lines between the gallery items that followed the size and width of the container. Messy business 😅

[@chrispaschall5507]

These background repeat properties are cool. The star example was pretty good, but if it were me, I’d probably just get the svg code of the star, make a symbol tag of its code, and have JavaScript render SVGs with use tags in the DOM using a for loop that would execute every time the select field changed. Then let the flexbox gap property take care of the spacing from there after the stars are rendered. Less math involved that way.

[@Mr.RobotHead]

I remember the olden days when we used to have a background image that we'd repeat to make a nice tiled pattern. `round` is probably useful to keep those tiles _close enough_ to the original aspect ratio without cutting off a bit of the pattern. I can't really think of any other use, though.

[@daviddonachie5333]

I know! That comment that everyone just uses "cover" is so much a thing of our big-bandwidth era. When I started, it was all about making 10px textures and then tiling them ... or 2px textures even! The idea of a non-repeating background was the werid thing.

[@vincentjacquet2927]

Nice demo. I would only add "print-color-adjust: exact" on the rating element to better support printing.

[@BrankoStancevic]

Cool feature, thanks! Have fun animating star rating example! :D I actually have some thoughts, but I need to try those out first.

[@kirillsukhomlin3036]

You could have your logo rotated to connect edge points of 'f' letter. So background-repeat: round works with repeatable textures like that.

[@jacobwwarner]

Regardless of supporting or opposing this, it will be really interesting to see how they restore the land previously submerged in the resevoirs. Also, they mentioned the two dams remaining in OR to mitigate flood waters, but what about the communities downstream in CA? I'm unfamiliar with the area, but Im curious if those small towns could be at risk of major floods if theyre not high enough above the rivers.

[@MyDpop]

I learn something new every time, thank you Kevin. 🤟This reminds me a bit of *border-image* . Another exotic and lost property 😏

[@Matt23488]

you could use `round` to take a simple image that perfectly tiles visually with itself to create some background patterns that are dynamic based on your resolution and aspect ratio. That could be kinda cool.

[@GerritforBazeja]

I used "round"for an image that was just to small to cover my background part for content. Not jet online.

[@codclever]

How the hell did you send this comment if the video was sent on 11:22 PM IST

[@bharatbaraiya7552]

​@@codclever Same question bruh😮

[@drumming_cat]

this video was posted an HOUR ago but this comment is from a DAY ago???

[@mikaockerman832]

Before I hear your use cases. I could see using round on abstract type images where aspect ratio is not as important, perhaps with a semi transparent overlay to dim them a little and set them as decoration behind some display images, like perhaps products or something.

[@kaustavroy6542]

That is such a good use case. Thanks Kevin.

[@Thor6398-jt4mb]

Wait, have you always been saying "front-end friends"? I thought you said "friend and friends" 🤦🏼‍♂️

[@Tiger__Man]

😂😂😂😂 yeah i just now realise also

[@salad_txt]

Hahahaha I thought it was just me!

[@BliitzPint]

Haha same here :D

[@luca.pettinato]

Me too

[@olinadeimbakar]

Guilty too😂

[@PacificDev]

Great stuff as always! Kevin 👋 how did you manage to hide that little oblique bars on the bottom right corner of the resizable element?

[@Novacification]

Another use case for space would be a background of sponsor logos. Maybe you have a sponsored event that needs a promo page with logos in the background and a small info box with event details in the middle. Sponsors don't care if it looks natural, they want their logo to be as visible as possible and preferably not cut off anywhere. You see this pattern used in the real world all over the place, e.g. in sports or at a red carpet event.

[@VideoNOLA]

You should add a giant "CSS Cheat Sheet" wall poster to your merch store!! Leave nothing off!

[@eccenux]

Space would work nice for most backgrounds that are covered by content. So there is some pattern on the left, content, pattern on the right. And you want the pattern to align to the sides. You can kind of cheat now and do two backgrounds, but using space would be so much easier 🙂

[@atrus3823]

Background repeat round might work pretty well for a grid. I guess the lines stretching might look weird, but maybe it wouldn't be that noticeable. I think I'll try it out at some point

[@mannixmd]

Kevin blowing my mind one video at a time :D

[@mansurhamidov2319]

For gap to work properly it shouldn't be more than quarter of star-width. Just simple math there could work. Like computed gap: max(var(--gap), calc(var(--star-width)/4))

[@yanexy]

repeat: space is a beauty, and your implementation also ☺

[@PascalHorn]

One random semi-related fund of my last few weeks was, getting background color on an image to get it perfectly "scaled" to a parent box. Like: .parent { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background-color: #ccc; } .parent img { width: 100%; height: 100%; padding: 20px; border-radius: 15px; box-sizing: border-box; object-fit: contain; // Magic; background-color: #fff; // } Even if the image has a random size like 200x100 pixels, this will fill the rest up with the background-color of white in this case. It becomes a filler color. With that logic, even a background-image like a radial gradient and background-size: cover should be interesting. And yes, the border-radius and padding on the image will be placed at the corners of the 200x200 pixels of the parent. Love these random stuff you learn after years and years along the way.

[@nielslytzdk]

A fun little demo, but I would not use this specific example in production, you are taking away data from the DOM which is critical for accessibility by rendering the stars as a background image. But still glad to learn new features that I didn't know existed 👍.

[@DerClaudius]

You can probably use it to implement different kinds of 9-patch-scaling if you set multiple backgrounds

[@_dinesh]

wow learned so much in this video. I didn't know you could set css variables from js by `document.body.style.setProperty('--star-count', e.target)`. Nicely done!.

[@gizmostudios]

Also good to know is you can get the CSS properties with style.getProperty() :)

[@domanickharper]

all this time, I thought he said friend and friends but front-end friends sounds nice too, a friend none the less

[@TheLastSeason]

Thank you Kevin! I love your videos)

[@Maseschine]

For the space and round function I can see image textures coming to websites as their backgrounds.

[@BGdev305]

Would have really been nice had you thrown some css fade animation. And 2x as nice with a fade and a growing size transform!

[@VE0003]

2:24 or a square background texture/pattern that perfectly tiles

[@ellopropello]

css is getting better and better :)

[@Psyzenn]

Maybe round for animations ? Like some cool distortion effect.

[@sunflair-wa]

I have a question. Using your star example, would you be able to use a clip path for the repeating image, or even a background-image of a radial gradient using a background size? Asking for a friend, which is me. :)

[@harshbhardwaj6060]

Is it good using SVG's to create some moving things or should we use CSS for that. Whats your take on those people doing svg craziness.

[@jamescat2386]

something makes me think if it was a high enough star count (so it's fine in this example) then you could instead of distributing the space, fit another star in, I mean obviously it's fine in this case but at a certain scale it breaks (maybe?)

[@Noritoshi-r8m]

Have you done a How to make a proper Header video? I always struggle with background images x_X

[@blokche_dev]

There's so much we can do with backgrounds.

[@justingolden87]

You should make a fef hat that would be dope

[@peterhorvath6859]

You could make a video on how to format a plain numeric cell value with thousand separators in css only! 1234561234123456781234567890 No js, no html modify. Or why not possible?

[@outpost31737]

You can use background-repeat: space repeat;

[@aseemanand1]

How does your video work in PIP mode on youtube?

[@Komentujebomoge32]

Have anyone any idea how to make button which appears on some scroll level, and by still going downwards it sticks into the place where it appeared? I am asking because I am working on button which takes us after click at the TOP of website, but by trying many own ideas and by trying looking for answers in the NET I barely can find anything about this topic.

[@druharper]

Nuggets of wisdom :)

[@muchis]

interesting, i learned something, but at the end that was honestly an overengineered flex + gap 😅

[@muhdkamilmohdbaki7054]

It puzzles me why I never watch any magician does CSS on their shows. The amounts of tricks they can perform are limitless and I still can't understand how they do it. All of these are beyond magic to me🤭😅.

[@BliitzPint]

Wait, you can set custom attributes on HTML tags and caculate with their values in CSS?? What is that magic??? 😮How does it work? How is it called? I want to know more of that.

[@kirillsukhomlin3036]

If the gap is more than 1/nth of the size of the image (star), one won't be able to put more than n stars. Maybe even less (depending on how round is implemented). This example is a little artificial.

[@andriydamon8388]

do you know React?

[@KevinPowell]

I have used it, not sure if that means I know it though 😅

[@markboots_]

Am I a nerd already knowing those values?

[@KevinPowell]

Most definitely 😆. But that's okay, at least you remember them. I actually did a short on `space` awhile back, and then completely forgot it existed until recently 😅.

[@RobertMcGovernTarasis]

No not avFeF, a KP acquaintance

[@RobertMcGovernTarasis]

Virtual)

[@marsovac]

This is very overcomplicated for something that just needs to show from 1 to 5 stars :P

[@TimeFlyBy]

That logo hurts my eyes...

[@the-real-pawook]

idk if it's tiktok's bad influence or just me being weird, but I was instantly offended by having to watch 15 minutes of the video where it could have been a Shorts clip

[@devileyes4u]

IT'S PERFECT!!! using in prod, thank you Kevin you are CSS hero!