 Hello there my friend and friends. There's not a whole lot to say about repeating background images in CSS right? I mean it's something that's just sort of been there for a long time. I guess the main thing is you just don't really want them because it's annoying. We just these days often just throw a background size cover on things anyway. But what if I told you that there's something very few people know about repeating backgrounds and that's even including some of the most seasoned CSSers out there? Well I actually just recently learned that there's a couple of values that you probably don't know about that are kind of interesting and we'll even get to a potentially kind of cool use case I think or a fun thing we can do with them anyway a bit closer to the end of the video. But first we're going to look at just sort of the basics and dive into a quick reminder on how repeating backgrounds work since as I said people usually do a background repeat of none or just the background size of cover and they're happy with it. So here is the front end friend little logo thing that I have now if you like it you can get a t-shirt it's on there too and let people know you're a front end friend the link to that is just down below. But yeah we have this and I've just put it as a background image on my body and it repeats and fills up all of the available space and then of course we can you know background size that background size of say I don't know 100 pixels and then it's that size play around the different size it just repeats and it fills up all of the available space especially because it's on the body right now. Now of course what we can do is we can come in and control that to a certain extent with that background repeat that I was just talking about and let's make the code slightly bigger here. So we can come in with a background repeat and then like I said we can do a no repeat and then it's not going to repeat at all I just have the image one time or I can repeat it across a specific axis if I want so we can do a repeat X like that it's only going to repeat on the X axis or we can do the repeat Y and then it's only going to repeat on the Y axis. I'm assuming you already knew this but just in case I wanted this quick recap but one thing it's really important when we're doing these repeats is it just fills up the image over and over and over again and it just crops it off and that's the thing with background images right they just repeat themselves over and over and over again so here if I go like that like it's just repeating and it's just cropping off where it needs to crop it off because it's filling up the space with that image at the size I said and background images are always cropped and I always tell people use background images if you don't mind it being cropped off the one time that there's an exception to that is if you use a background size of contain and then it just means it might not actually fill up the entire space but at least you'll see your entire image I don't use that one very often but it is out there if you need it but as I said there is a new value here and there's actually two of them we'll start with the first one and then we'll check the second one out after and the first one is you might have seen it in the thumbnail it is the background repeat of space you'll notice something changed but it's not super obvious what but what it's doing now is you'll notice it's the that fef there is four there four times and we can see the entire thing when we had it as the repeat x it's cropping it at that right side right and if I move this like it just crops the image off wherever and let's shrink this down a little bit more and then let's go back to having space here and now we're only gonna have three of them hmm what's going on right it's kind of interesting and it's repeating the image but it's making sure that it will never crop the image so as this gets bigger or smaller see how it's like okay we're doing our thing but oh at that point it disappears because there's not enough room for the three of them to be there and have them all there and then we can go this way and add more of them kind of weird right and kind of interesting now I'm going to make a small change here just to make my life a little bit easier for demo purposes and so I've put in this div of repeating bg that I have right here and the advantage is I can resize it so we can sort of see what's going on once again we're in the the default use state here it just makes it easier for me to resize things that's the only reason I'm doing it this way so once again we have the background image there so we can do a background size let's say 150 pixels and then the background repeat of space right there and you see it works in both directions and right now you might be going hmm this is really weird or you just thought of a really cool use case and I hope that's the situation but even if you haven't you know like this is a really strange property and I don't know how I'd use it it is kind of neat that it's never cropping anything and I think that's really really nice as we get smaller it sort of gets weird because you have so much empty space so it really does depend on the image and the size of your image as well and how you're going to be using it but it works in both directions and of course this background repeat is a shorthand as well so you could also do this with space and no repeat in the other direction and you could move this on over to the beginning and have it as no repeat space so you can have it go in one direction or the other or if you wanted to you could have one of them as a regular repeat and the other one as a space which is kind of interesting kind of different but you know the options on the table if you want it yeah if we just do the one property here then it's going to use space in both of them rather than only in one of the directions and I think I don't know it's kind of an interesting one and as I mentioned though there is another one but this is before we get to sort of the semi-practical use case that I've come up with for this where instead of doing it like this what we could actually come and do is with a round and round is a little bit different because it's actually going to sort of stretch and pull at the image a little bit you can see it's like changing size as this is happening and if you have the right like if I had this at the perfect what's it called aspect ratio as I was resizing it would always keep my logo thingy there the right size but maybe it wouldn't even as I'm doing this more but basically it's the exact same thing but instead of increasing or decreasing and having empty space it's not including any this image does have some empty space around it which is why we're seeing some spaces there but it's going to have no space between the images at all and it's going to sort of just squish and pull and round I guess round off the sizing of it to make it fit in a way this one just because it does distort the image I see less practical use case for it but once again I hope that you can think of something cool to do with that and if you do have a good one for round actually leave a comment down below or we're going to look in an example now of what we can do but if you have another thought that has crossed your mind or if you ever use this in production please do let me know what you did or how you did it or whatever it is because this is one of those things where I'm like I'm sure there's really awesome use cases for this that aren't even crossing my mind because these weird little niche things they usually have these like oh that is perfect for this like weird thing I never would have thought of before so if you have any thoughts on those or if you've ever used it please leave a comment below and just really fast before we get into the other example I do want to just show you quickly here the browser support this is of the time of recording I'll put a link I guess down below but it's basically perfect if you can do anything if you're writing CSS this is as good as browser support for anything is going to get so yeah you can use it either one of these without any worries so yeah let's jump over to this I know there's probably better ways of doing this to be honest with you but I thought this is like a interesting way that we could approach this type of thing so we're gonna do like a star rating system where you can choose how many stars you want and then it's going to show you that many stars using the background image which I've never thought about doing this before but it just seemed like something we could do so just really fast I have a select here with some options in it so nothing too fancy there there's just a big font size and a bit of padding on there and then if I look at my javascript we're grabbing that so let my star rating be my select menu right there nothing too complicated and then we're going to add an event listener where that event listener is just going to look for a change so anytime we select and then actually click on something so we're changing the selected thing here we're going to set a property on the body of star count and then we're just grabbing the value so the value is you know option one is zero to one two three four and so on so nothing too complicated at all going on there and then yeah we can do stuff with this I'd love to know what you think about this too if you think like Kevin this is not the best example or this was cool and I'm you know could maybe not use it exactly like this but we could do something similar if you want so I don't have much right now we're going to look at sort of what I have set up here because I have a background image on my rating here but we can't see it so I'm going to come here and let's just give this a height for now of I don't know we'll say 10 rem just so we can see something and there we go maybe I'll do 15 now just so we can see that our background image is in there and we're going to improve this so that doesn't happen and so we just have like our stars showing up right now and for me what at any time I'm doing something is we're going to have sort of some calculations and some other stuff going on I want to make it easy to come in and make changes to it so here I'm going to say that we have a star size and let's just go in with a 10 rem for now and we're also going to do a gap we're going to say I don't know we'll go with five pixels because of the way space works it's going to leave space between my stars I want to be able to control how much space that actually is so we can go in with that right there so here we obviously we don't want things repeating like they're repeating right now and so let's say the background repeat is going to be and we need to change two of them because I'm going to do a space this way but then I'm going to do a no repeat the other way just to make sure they're only repeating left to right and not repeating up and down so that is perfect and then we can also come in and say that the background size is my var star size and that way they probably won't change very much but if I come in here and I make that smaller it's going to change the size of my stars I think a smaller value for this one will work better so that's the beginning and you can see sort of the idea right the the bigger or smaller this red box is and we get rid of the border eventually on this but it just sort of highlights how it's working so we can just have a set number of stars and we want to control that space that's in between there so when we do this and we get our star count from the drop down here from our select menu it's passing one two three four we're getting these unit list numbers right so we need to do something with those so what I'm going to do is I'm going to come down to here and or I'll come here actually because we have a height and with my height let's add a width and my width we're going to do a calc just because we need to add a unit into that number we have so we can do our var and it was star count right star count and we're going to start with zero as a fallback so if you know if we haven't selected anything the user's loaded the page the default will be a zero and then if we choose something then it will use the star count there so this is just a fallback if the custom property hasn't been declared or said anywhere so I want my width to be my star count but I obviously I don't want my width to actually be zero so what we're going to do is we're going to multiply that by our star size so times var star size and look at that it's down to two and then I can go to one and then go to three and then I can go to five and I can get whatever I want isn't that already kind of cool now there's two problems one the height is kind of ridiculous so even though we have the no repeat on here because it is a background image like if my height was too small let's make it just too rem for now that could be problematic because it cuts things off so for the height here I think what I'll do is my var star size as well just to make sure it's always big enough and if you want you can even do a calc here and add a little bit of extra height to it that would work fine so we sort of have something that's already working but my issue with it right now is that when I do it there's no space between the stars and then you know I don't need to use this space here I can just use a regular background repeat and everything would work right I can let's not take that one off let's just do it like this like there is no background repeat no it's sticking out there but the same idea we're just matching the size of the star so let's take advantage of that and actually add some space in there because I think that's what makes you know sticking together looks kind of weird and I like that we'll be able to control it and honestly it's really easy to do it's just here where not my background size but where I did my width we're going to make this a little bit more complex not really but a little bit so to do this we could come in and I was hoping this would work where I could just do plus var and do my gap here because that will add you can see there is a space there the problem is and if this doesn't bother you but just like as we make it bigger it's like ruining things right a little bit because here or sorry at two stars it's actually five pixels in between them let's make it a little bit bigger just so we can see it so we actually have the space we want but then when I go to two stars or three stars I should say then it like halves that amount of space because it's dividing that between the two of them and then we're dividing that space between the three of them so I'm going to come here and I'm going to do a gap calculation just make it short and then here what we're going to do is I'm just going to paste this in right here just to I don't want to make any typos along the way basically and forget a parentheses somewhere so now before I explain how this works let's just update my gap here to be my gap calc and now we'll explain how this works so everything should look the same but let's go to zero and we have nothing because we have zero width if I go up to one we have one star perfect what we're getting is the width of my rating is exactly the size of the star because my gap calculation here will be zero because we're doing star count of one minus one so we have a zero times my gap but zero times my gap it doesn't matter it's zero then we go up to two stars and we're going to have a gap of 15 in between the two of them because we have two minus one so we have one now times my gap is 15 do it at three see how my last time remember before it was like shifting every time we added now it doesn't shift so if we did four four minus one is three times the gap times 15 45 so it's going to end up evenly distributing that 45 in all the gaps we have here a very flex boxy and like the same way to justify content space between would work but we're sort of having to do the work ourselves here it's exactly what this is and now I have a star count that works there is one issue with it is if you made your gap too big so let's just come here and make it I don't know 10 ram um it's going to break things uh because now you know it doesn't it's going kind of crazy uh so you could actually um I'll put a finished code pen that actually has a bit more complex math going on here that actually prevents you from putting too big of a gap based on your star size and stuff I don't want to get into nitty gritty I wanted to look at this property and I think it's pretty cool um so this is happening thanks to our space that that enables this and makes it all happen right and if I bring that back down to five now we have a gap and it lets me control it but anyway an interesting sort of obscure css property that you could probably do some interesting things with uh and if you enjoyed this video and you'd like to know other css properties and stuff that people don't know enough about uh there's a much more practical one I think where you can actually do all sorts of controls on your underlines for things like links where you can control things like the thickness the offset the color and other things as well a lot of people end up doing pseudo elements and borders but you do not need to do all that there's easy controls for all of those things and I've covered all of those any video that is right here for your viewing pleasure if that sounds good to you and with that I would really like to thank my enablers of awesome Andrew Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome