HTML & CSS for Beginners Part 13: Background Images

today we're just all about the background images so let's jump to it okay so I've changed things up a little bit from the last video but more or less were 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 as we do in img src for the image source alt I'm gonna do my alt tag and close that off my alt is a cute hamster I'm going to use the same little hamsters last time so that was in my images folder and it was hamster dot jpg and we'll save that and refresh and there's my cute little hamster but I don't want him here I want him as the background for this whole div hmm 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 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 we can get rid of all that and come in with background image and if you're using a code editor like atom and it's Auto filling 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 in the Internet but I would recommend you have it in your root folder like my hamster is 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 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 to do now is we need 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 slash this means go backwards then find my image folder and then find hamster dot JPEG inside my image folder let's save that hit refresh and there he is awesome 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 that pictures 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 the background of pink the box was getting bigger and smaller according to the content so what 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 it wasn't paying attention to the color it's just filling the background with that picture however big the boxes is however big the box is so I mentioned in the CSS box model video that if I want more background I can add more padding 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 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 to do it stops it from repeating itself we have repeat we have repeat X so it's repeating only on the x axis 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 the repeat-x and repeat why 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 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 gonna put a link down in that description below if you're looking for it and I'm going to find something that works for my site add this is sort of the same color why don't we try that one out so I'm gonna 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 out on our body so instead of having a background color or I can keep that and I can do background image remember its URL so I want to go backwards a step I want to go into my image folder and I think it was weather dot PNG I'll save that and hit refresh and there we go it works I can see those repeating pattern and it's 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 we've kept my background color and my background image by doing this is I saw before it 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 in having a color and an image 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 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 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 one of them is background size and for this video it's the last one we're gonna 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 it's going to fill the whole space up so it's gonna it will stretch your image in proportion so it won't make your image flat or fat or anything fat it's going to keep it in proportion but it will and it's gonna make sure I see the entire image so it's I see my whole picture it's gonna 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 gonna change things up so we do cover personally I love for when you have pictures like this that you want as a background and the reason the 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 gonna repeat itself because it's just gonna 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 hope that was left and right 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 my hamsters 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 in side this space and I said background slaves would be the last thing we'd look at the last one we actually will look at as background position we get 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 and 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 bottom and save and now our let's try right to bottom refresh and where did he go well he's gone and now I actually see the right side of my picture instead so we can play with the background position whoops background position a little bit and 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 top the bottom the left the right or I just need a perfectly Center of my picture in there and yeah that's it background position there background position background images are fairly easy to use sometimes 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 and more padding you have the more background you have it's one of the problems I often see people running in twos 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 it 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

Channel: Kevin Powell

Views: 544,939

Keywords: HTML, CSS, Tutorial, How to, background images, how to put text on an image, website, HTML & CSS for beginners, HTML background image, background image

Id: 33IinMVJf-M

Length: 11min 18sec (678 seconds)

Published: Fri Nov 04 2016