Controlling background-images | CSS Tutorial

Key Takeaways

background position seems like a simple enough property but you can do a lot more with it than you might think hi there my name is kevin and here on my channel we will learn about the wonders of css and in this video we're going to look at background position first by exploring the basics and the keywords then diving a little bit deeper into unit based positioning and then something that's kind of weird where you can actually do like a right 20 pixels bottom 10 pixels we're also going to look at how we can apply and position multiple background images on one element of course we're also going to be looking at how we can just position background images but then also what happens when we play with background size and how that affects it as well as the background size cover because that sort of changes the game a little bit in terms of how background positioning is working and you know you approach things a little differently once you put the background size cover on there so we're going to start with just sort of the basics and then we're going to get through all of those different parts and then we're going to jump into the cover after that and for all of this there are chapters set up so you can come back later to any part you want and you can find or if you already know some of this stuff you can skip to the parts you want to they're just all down below awesome awesome let's go and do this all right so we are here in codepen and ready to dive into background images and the different things we can do with it mostly exploring background position but we'll look at a couple of other things along the way here and because i am in codepen you can come and the link for it is just down in the description below and you can play around with it as i do this or you can reference my finished code as well if you want to reference it and you'll see here i have a title and then i have this bg image class right there so we're going to start there and just say i have my bg image and we want to do something and i already have an image ready to go so here it is but it's not showing up on the screen and this is one of the annoying things with background images is sometimes you feel like you did something wrong because you place it and then it doesn't show up and that's because it's on an empty div and if you have an empty element there's no content in there you'll have nothing show up because it's zero pixels tall so as soon as i add a little bit of content there now i can actually see what's happening uh instead of doing that i'm just going to give it a bit of padding we'll go with like 20 m of padding or something just to give it some size and now i have a whole bunch of background images um so to be able to play with background position if you have a repeating background it's definitely something you can do but i don't think you're going to be doing it too often and because we get this really crazy repeating grid going on it also makes it a little bit harder to understand what's happening so i do think the best thing to do with that background image on there is actually to come in with a background repeat and just set that one to no repeat you gotta spell things right though to get it to work no repeat and now we should just have one image right there and while we're here why don't we also put an outline on here of two pixels solid black just so we can see the the area that we're working with and so this whole div has this background image on there and the reason the background image is that size is because this is the actual dimensions of the image if i really wanted to i could also come on here and say that the background size is let's say 200 and see what happens and it will get to 200 percent not of its original size but of the div itself so if i did a background size of 100 then it's going to be the width you can see the width is matching there you can even give this two values and stretch it out uh let's just do 50 pixels for fun so we have different you know mixing units is always good um but it's 50 so it's 100 wide but 50 pixels tall we could switch that over to a 50. so it's 50 pixels wide and 50 percent wide i should say and only 50 pixels tall so if you want to play with the background size you can we're going to get more into that in a little bit but for now let's just comment that out we're going to stick with this one and we're going to look at some of the different things you can do with background position which is the big focus of this tutorial that we're working on and when you have a background position you can do different things so i can say 10 pixels and just leave it like that and let's see what happens well it moves 10 pixels and centers that's that's weird that's an unexpected behavior and what happens if i come in and i do 10 pixels 10 pixels like this and now well that's a little bit more of what i think you'd expect would happen so it's moved 10 pixels this way and it's moved 10 pixels down so if i make this 100 pixels we now see that it's moved over 100 pixels and down 10. so we have my x-axis here and my y-axis right there and i can control how this is moving around looking kind of useful except with pixels it's kind of funky because you know if you're making a responsive design or something like you know you might not want to do that so you could use percentage so we could say 10 and let's see what happens there and you know it's going 10 percent of the way across and so you can you know if i go with a 50 interestingly enough it will actually be centered right in that space so that's kind of cool right um so you can play around with your background position in that way now this can be useful in certain circumstances where you have some text and a background image that needs to be positioned in a very specific way but again with responsive designs i do find it very hard to get elements to go where you want them to when you have a background position on them set like this but where i really like background position is when you come in with say bottom left and it just moves to the bottom left or what if i did center right and it just moves on over to the center right and it's really really wonderful and really really cool and i love how this works and how easy it is to get something where you want it to go um with these types of things and right now you might be going kevin i don't see the practical use case of this but it's one of those ones that can be really useful we're going to see a little bit more as we keep diving into this but we can do a center right now there's another one that's really interesting but sadly you can't do it with the center property you can only do this at the top left bottom and right so let's say we do a top right so we're in the top right corner and you can actually come in with a pixel value now as well so 20 pixels and it's going to move down 20 pixels so it's top right and move down 20 and i can even come over here and say 50 pixels and i could shove it over 50 and this i never knew about and i love this so much i i used to toy around with trying to get things based on the top left and then like move them way over and i'd have like a background you know the background position here would be set at like 150 percent um because again let's let's try that what if i do 120 percent here and remember if you only have one value it's going to use the x value so it's sort of overflowing it almost except it's a background image so you can't overflow a background image so i used to come in with these big images that had the same or you know like a i used to come in with these big images have them on the right side and then you know to get it there i'd need to be playing with these really awkward percentages and it was really hard when you know it'd be so nice just to come in and say uh left negative ten percent or something like that and then you could get it to be uh left negative ten and you need two values or this doesn't work uh so let's say the bottom you know zero pixels or whatever um and then you could do it that way and that's left so i should have said right and not left to get it on that side there you go now you can see it's spilling off that way i can do a negative twenty percent and it's going to keep going so you can really get things to be exactly where you want them to be which is really really wonderful um and this can be really useful you might again be with this type of image it might not seem the most practical so i do think it can be maybe a bit of an edge case but one thing that's also really fun with background images is you're allowed to have more than one and i don't know if you're aware of this but we could come in and actually set two background images on this so you can see here i have my comma and then all i need to do is come in and place this next background image so i have two background images except you only want the url so just like that comma separated and then you can see i have another background image coming in and the cool thing here is i can actually do here i can put this one to repeat and one of them is repeating and one of them is not repeating and then for the positioning of it and everything i could do a comma and just do a top left and it's positioned top left except that one's a little bit small but you can come okay so let's just fix that we can say background size now and we want the first one to be auto so because the first one is this one here um so an auto and then we could say a 10 and we get the little ones and then we get this here and you can play around with that and have a big background that's doing something and have this little decorative guy like sticking at the bottom or something smiling at you or whatever it is set as a background image because it's just a little decorative element it can be a lot easier than using a pseudo-element like i really my instinct is always to go to pseudo-elements uh to do something like that so you get this nice little guy you don't have to worry overflows because it's a background image you can just stick them in there and it can work really really well um but another place where i like background images and again this this i really like being able to do these you know right negative 20 is really cool as i said though you can't use center values for these or it's just going to pop back there because it's invalid so if something's invalid it's just going to assume that it's top left at the end of the day it sucks we can't do center and then offset it a little bit but that is how that works um but we're going to do is we're going to comment this guy out here because another place and i think the more common use case for background image positioning is when you have something else going on which is here this grid that i have set up and actually let's go take a look it's just a very simple grid each one has a background image on it they're all named but there's nothing too fancy going on but we want to play with the positioning of things a little bit and i'm going to do they're they're repeating right now but i am going to come on to all of these actually here's where i have it set up if you don't know about the selector like this it's just selecting all classes that start with a class of bg hyphen so all my classes bg1 bg2 bg3 all of them are getting selected here and they're all getting this background image on it and what we can do is set a background size on all of these of cover just to get that background image to fit the entire space and background size cover is amazing it's going to just make the image fit in this case it's making the image bigger and you can actually see that it's losing quality and that sucks and that's because it's a very small image so you do have to be careful with background size cover just to prevent this like really pixelated crappy look from coming in the other thing is you can use a really big image but when you use a really big image and you're really squishing it down i'm going to use it for now um just because it works better for my example that i'm gonna be looking at and i think it looks a little bit cleaner um but this is like a really massive image so i wouldn't normally recommend something too big um you know you want to be cognizant of the the low you know your image loads and everything like that but just if you are using a background size cover just to be careful um if you're making things blurry a little bit and we want to come in and this is where you can still use bg1 um our background position here background position of top left and when i do the top left that one won't change because that is the default um but what we can do is let's just come in and do these next a couple ones two and three top center and we can do a top right and you can actually see that they've changed around a little bit and when you have a background size of cover combined with background position because the cover is always filling the entire space it becomes the focal point of the image like where's the part of the image that's always going to be visible so in this first one the top left is always visible here it's always the top center and here it's always the top right so that's why on this one i'm cutting off like the guy's feet a little bit this one i'm starting to cut off his head and in this one he's there because that's really the center of the image and as we grow and shrink you can see how this one the left of the image isn't changing it's cropping the right side and it actually goes small enough look at that we can just line it up perfectly it looks like we just have lines going through them but you can see that it's cropping the legs off this one is cropping his head off and this one is cropping both sides off and sort of squishing the image from both sides as we grow and shrink there so of course we can do the same thing with the next set of images right here so we have my four my five and my six right there and instead of top for these ones what we're going to do is we're going to come in and make these all center so we throw a center on there now you might be going well they look exactly the same as the other ones and that's true at this size they do look exactly the same because of the way cover is working it's only it it depends on the size of the image that you have and the aspect ratio but that it really depends on the aspect ratio of the element that you have and the aspect ratio of the image itself and so at these small screen sizes these all look the same because it's cropping from the left and the right and not cropping from the top and the bottom but as soon as we get to a different aspect ratio now you can see where things are changing a little bit on all three of these the left and the right look the same because now we're starting to crop from the top and the bottom instead so over here we're cropping from the top over here we're cropping from the center so i can see all of him here i'm losing his hands and if we set up that last set of ones i'm guessing you can sort of guess what's going to happen where i have my 7 my eight and my nine and then we want to change each one of those from center to bottom and now that we've done that here again at this size all the left ones look the same all the right ones look the same and all the center ones look like they're behaving the same way but then once our aspect ratio switches now these three are all acting the same these three are all acting the same and these three are all acting the same way and you can see that this is keep these three it's all keeping the bottom of the image and it's cropping away the top these ones it's keeping the center and cropping from the top and the bottom and then these ones over here it's cropping from the bottom and we're keeping the top of our image so you can play i i use background size and background i use background size cover and background position all the time just depending on the image that i have and how i want it to be cropped when it is going to be cropping and i find it such a useful little pairing of stuff and this is you know it's a little bit weird seeing it in action here but it really shows you how it's working in all the different scenarios where background position does get a little bit weird if you are using background size cover is if you do something like 10 pixels 20 pixels to try and offset it a little bit actually let's switch that to like a 20 percent just for now um and we can actually see our percents aren't going to work let's try 200 pixels um and we should see that there we go it's actually repeating the image but it's still a background size of cover so it's shrinking down and then it's just doing this weird like tiling thing and i don't really know why you'd want to use that combination um and background repeat of no repeat so like you can do something like that but i don't know why you'd want to necessarily i think if you're using a background size of cover you're for the most part going to be using these the keywords here instead of actual values because i think it gives you a little bit more control i think that's more of how you're normally going to use it with some sort of text on top and you're just controlling the image on where it should be going and one last thing i think it's really important here is i put a background color on my text because it wouldn't be readable if not and one mistake people often make is they want to get a cool image with some text on top and they're more focused on the image than the text but if there's text there the text must be readable so always make sure that the text is more important than the image and you're positioning your image and you're using this maybe you have to offset your image a little bit or maybe you have to do something that takes away from it a little bit to make the text more readable and if that's the case that's the case even if it's a really cool image or you find a different way to do the design but text has to be readable because that's what people are on your site for and there we have it background position in all of its glory now is there another property you'd like to see me deep dive if so leave a comment down below and let me know what it is i'd love css i love learning more about it i love teaching other people about it so please leave a comment down below if there's anything you'd like to learn more about thank you so very much for watching a huge thank you to my patrons for helping to support what i do here on my channel and of course until next time don't forget to make your corner of the internet just a little bit more awesome