HTML & CSS for Beginners Part 13: Background Images

Key Takeaways

today we're just all about the background images so let's jump to [Music] it okay so uh I've changed things up a little bit from the last video but more or less we're where we were I have a box there with a paragraph in it and a pink background well let's say I want to put a picture behind there instead of having that ugly pink background what a lot of people will try and do and it sort of makes sense we know how to put in images so we do an IMG SRC for the image source uh Alt I'm just going do my ALT tag and close that off my ALT is a cute hamster we're going to use the same little hamster as last time so that was in my images folder and it was hamster jpg and we'll save that and refresh and there is my cute little hamster but I don't want him here I want him as the background for this whole div hm how can I do that well I can't put him in the HTML this is the content of my page and this paragraph is here and my image is after it and that's just how it's going to work so I'm actually going to delete him from here save that so refresh and you should disappear and I have to go over to my CSS so just like I can put a background color of pink I can also put in a background image so what I want to do is I can get rid of all that and come in with background image and if you're using a code editor like Adam and it's autofilling uh you see image at the top and you might be inclined to grab that one but we actually want to grab URL which is the address of the image so you could put in an absolute path here and have it link off to an image somewhere else on the internet but I would recommend you have it in your root folder like my hamster is uh and what you might do is do IMG because that's where my hamster image is it's in my image folder and write in hamster jpg the problem is it doesn't work and the reason it's not working is this is a relative link but I'm inside my CSS folder right now so I'm in here uh I'm in this file and then it's looking for IMG and it can't find it and so it just doesn't load it there's no broken image or anything like that when it's a background image if it's not working it just doesn't have a background so what we need it to do now is we need it to go from here back one step into this stage and then into my image folder and to do that we use two dots so two dots forward SL this means go backwards then find my image folder and then find hamster jpeg inside my image folder let's save that hit refresh and there he is awesome well sort of awesome you'll notice there's a few weird things going on first of all the image is repeating itself here so I have my hamster and then it's you know you know the picture is starting itself over again and I don't see all of my hamster what's going on well pretty much just like I had before with a background of pink the box was getting bigger and smaller according to the content so when I'm changing my background image it's the same as changing the background color the browser is not really paying attention to the picture just like you know wasn't paying attention to the color it's just filling the background with that picture however big the box is is however big the box is so so uh I mentioned in the CSS Box model video that if I want more background I can add more padding uh in this case let's do 200 top and bottom but keep 100 pixels on the left and right so if I save that while I start seeing more of my hamster and well now I have too much of my hamster again this background is repeating all over the place so I do have a few options here uh I do have a background repeat option and with the background repeat we do get some options I get no repeat which sort of does what it you'd expect it to it stops it from repeating itself we have uh repeat we have repeat X so it's repeating only on the X AIS so only across this way or we have repeat y whoops that should be lowercase save and now it's only repeating up and down with some images repeat X and repeat y are what you want and it will work well because you want a repeating pattern across the top there's lots of good websites out there that have um background patterns that you can use that are meant to be repeated and they repeat themselves all over the place in fact why don't we go get one of those right now subtle patterns is a very nice site I highly recommend it I'm going to put a link down in the description below if you're looking for it and I'm going to find something that works for my site uh this has sort of the the same color why don't we try that one out so I'm going to hit download it gives me a zip file I want to take open up there it usually gives us a PNG so I'm going to grab that and just drag it off into my image folder and so I have that file in there so why don't we come up and put that on our body uh so instead of having a background color or I can keep that and I can do background image remember it's URL so I want to go backwards a step I want to go into my image folder and I think it was weather. PNG I'll save that and hit refresh and there we go it works I can see those repeating pattern and it's a it's a pattern that's meant to be repeated so I shouldn't get any awkward lines like this it should just be this nice background image that's filling up the whole page now I've kept my background color and my background image by doing this is saw before if my background image doesn't load it just pretends it wasn't there if I have a background color it will fall back to that background color and because these are super similar to each other it's a pretty nice fallback so there's no problem uh in having a color and an image uh and it might actually be a good thing just in case the image doesn't load for one reason or another but with this hamster uh this whole repeating background pattern thing isn't working and the background repeat none isn't really working either it's cutting off you know it's it's just not looking so good uh so we have a few other options so let's come in with background and you'll also notice we have a few things here uh one of them is background size and for this video it's the last one we're going to look at Auto is the default so it's one of the options we have contain is another one so let's try out contain and save it contains a bit of a weird one um it's going to fill the whole Space up up so it's going it will stretch your image in proportion so it won't make your image flat or fatter or anything like that it's going to keep it in proportion but it will um it's going to make sure I see the entire image so it's I see my whole picture it's going to make the whole picture fit one time on there but if there is any empty space it will keep repeating it the other one that's in there is cover and if I use cover I will lose a little bit of my image and on this one we don't actually notice it right now I'm going to change things up so we do cover personally I love uh for when you have pictures like this that you want as a background and the reason cover works so well is it's going to cover the entire div or whatever you're putting a background image on with your picture and it's going to make sure that the image is growing or shrinking proportionally and it's not going to repeat itself because it's just going to use that one image without repeating to fill up the whole Space this can get a little weird though let's just say I make my padding top and bottom 800 pixels which hopefully isn't a realistic scenario oh that was left and right uh but that's okay you'll see now I'm losing the bottom of my picture and he's becoming a little bit blurry my image wasn't this big it's making the image much bigger than it used to be so it is losing some quality I'm also losing the bottom of my picture a little bit and let's bring this back down to 100 and make this one 800 and you'll also see now I'm really losing my picture uh my hamster is all the way off here so I'm losing quality and I'm losing a lot of my picture so remember it's just like having a background color the browser doesn't really care it just wants to make sure that this picture is fitting inside the space and I said background size would be the last thing we'd look at but the last one we actually will look at is background position we get some some different options here and the default is top left so right now this is the top left of my picture and it's making sure that the top left actually aligns there let's just change that over to Center and hit refresh and now I actually see my hamster there he is and what it's doing is it's putting the center of the image in the center of the div so the position background position is Center and it's Center perfect middle of the picture is in the perfect middle of the div I could also say B botom and save and now our bottom let's try right bottom refresh and where did he go well he's gone and now I actually see the right side of my uh picture instead um so we can play with the background position whoops background position a little bit um if you're missing part of your picture and you want to sort of realign it a little bit so you can choose you know I need to see the more of the the top the bottom the left the right or I just need to perfectly Center my picture in there and um yeah that's it background position or background position background images are fairly easy to use sometimes you run into some weird things like the repeating pattern that we just saw and again the background size cover is a nice cure all for that if not you get a nice repeating hamster over and over and over again and always remember if you're using background pictures padding gives you more background more padding you have the more background you have it's one of the problems I often see people uh running into is they want a nice beautiful background image but it's they don't have enough of it and they you know I need more picture on the top I'll add more padding on the top I need more picture on the bottom I add more padding on the bottom and remember if you want text on top of an image it has to be a background image that's it for background images this actually went on a little bit longer than I thought would but we covered a lot in there hope you learned something from it I look forward to seeing you in the next video make sure you leave a comment down below to say hi if nothing else and see you guys next time