Background images with HTML & CSS

Key Takeaways

getting an image behind your text should be easy but often when you're first getting started with html and css it's not actually that obvious how to do it and then once you get it there you can run into problems where it looks like this or where you have an image that you thought you liked but you can't actually see it but you're sure it's actually there so in this video what we're going to be doing is looking at how we can get background images there in the first place how we can control them once they're there and how we can figure out what's going wrong when it's not working hello my friend and friends i'm so glad that you've come to join me once again and if you're new here my name is kevin and here at my channel i hope you fall madly deeply in love with css and if i can't get you to fall in love with it i'm hoping to at least help you be a little bit less frustrated by it and that's what this video is all about getting less frustrated with background images so let's dive in right here and i am using vs code at the moment and you can see i have a very simple page with not very much going on and i have this image that i would like to be the background image i want that behind this text that's up here and right now what i've done is i have this html where i have a container i have my h1 a paragraph and then i have my image here and that's the first mistake that i've made now it is possible to have an image that's in your html go behind things but it's much more complicated to do it so usually you won't have a good reason for doing it that way so what we're going to do is we're going to take this off from here and hit save you can see it has vanished over from that side because we don't want it to be in the html we want it to be in our css now you might see tutorials that show you how to do it inline on here so i can come here and do style and set it all up there you might see other ones that come and suggest just doing it within style and setting it up here now if i were you what i would recommend doing is actually coming here and creating a link and we're going to do rel is equal to stylesheet style sheet and then here i'm going to do an href which is going to go to my css file and if we come and look in my document structure here you can see i just have a style.css file right there so we're going to write style.css close that and hit save and a few things will change because i already have a little bit going on in my css file um but yeah just i would recommend definitely setting this up as an external file just because that's what you're going to be doing long term and especially avoiding inline if you do it within the style tags not the end of the world but doing it inline i would really recommend not doing it that way it can be really quick to sort of set a color on something but in general it's bad practice and you're going to stop doing it very soon anyway so if you still are doing things that way you might as well stop now and link to your css file and if you don't have one yet you just do file new make your css file and then link it and now really quick because we will be talking about this with our background images as well is here i'm just doing a style.css because they're all in the same place here in vs code sometimes you will get a css file or a style and so let's make that we're going to do a css i'm saying file i should be saying folder so i have a css folder and the css will be inside of there and this is very common so we can have better organization so if that's the case just make sure we say here the href is css forward slash style so it's actually pointing in the right direction and now what i can do is go over to that external css file and we can do some stuff here now i have done a little bit here we're not too worried about what i have set up here um let's do a little bit extra though i'm going to say body and i'm going to do a margin of 0 on here just to take the sides off here you can see there's some spacing so we're gonna hit save on that which helps take that away and let's just change my font family family and we'll do a system ui just like that just to make it look a little bit nicer so nothing too much to worry about there and what i really want to focus on is my hero class that i have right here and if you're not familiar with classes versus ids and other things like that with selectors with css what i would recommend is checking out a video that i'm linking down below this sort of breaks down how selectors work with css and all of that i am assuming it right now you do understand at least the basics of creating a selector in your css but again you could always visit that video then come back to this one to finish off with your background images but yeah i have my hero class here which is looking at the div that i have set up right here and so that's the one that currently has this uh dark background color on it and the white text and so what i'm going to do is even though i have a background color we can have a background color and image and we're actually going to revisit that at the very end of this video for a cool trick that you can do but what we're going to do is here then set up a background image and background images are kind of funny because the syntax where them is a little strange and if you're using something with autocomplete you might actually see something like this come up and that looks like it might be something that you'd want to use but it's actually url and so we're saying we want a background image and then we have to tell it where it's going to find that image so the url for that image now this could be an absolute link going somewhere else but in general if you're going to have images on your site they should be hosted by you so if i come and look here i'm currently in this css file that's inside a css folder so this is one of the first problems i see people make is here they write i'm going to use my landscape small first so landscape small dot jpg and i'll put all of that just in quotation marks and hit save and it's not working and this is something that people get very frustrated with and this is one of the first things is we have to make sure that we're taking the right path to get to our file if this css file wasn't in here and it was actually down here it would work but because it's in a css folder what we have to do first is tell it to go one step backwards so we're going to do dot dot forward slash and that means go one step backwards we're exiting outside of the css folder and then i can find my landscape small right there so if i hit save now we can see that it has come in and just a really important note here actually we can see when it wasn't working and we take that away the background color is still working and if you have a background image and you have a background color the background color is actually below the background image and this can be really important and a good idea when you are setting a background image to also declare a background color and the reason for that is if the image doesn't load because you made a typo or because there's a slow internet connection or something weird happens if you just have white text on a white background which is what would happen here let's just if my image is still isn't loading in we can't read the text it vanishes away so by having a background color and having your background image it just is a nice fallback to make sure that if the image doesn't load you'll still have a background set so it's a little bit of a fallback in worst case scenarios now we do have several problems with this as you can see right now we're going to solve those as we go through this but the first first thing i'm going to do is one of the things i see people often do is they come and they set a height and because they know they want like a height and lets us say 400 pixels and we still have the problem we have a repeating image it doesn't look great but we got the height we wanted that's great we have more space but then how do i get my text to actually be where i want it to be huh that's that's kind of frustrating and another thing that i generally always advise against is actually using height in css especially for like sections if you have a little icon that you need a certain size that's a different story but when you need to set like you have a section or you know this big thing where the content can change and if you're very early on maybe you're not worrying about responsive design yet but that's going to come very soon and this becomes a very bad habit to break so instead of using a height what i would suggest is using padding top to create the space on top so let's just say we have padding top of 200 pixels and then padding bottom of 200 pixels and if i hit save now you can see it's actually placing this in the middle because i'm putting padding on the top here padding on the bottom they're both the same on both sides and then my text can come in the middle and the big advantage of this is if i am going to resize my browser now and i shrink this down you can see that even though like this is wrapping down that the spacing's always adjusting as the site is shrinking and as the site is growing and it's always keeping that 200 on the top 200 in the bottom and then the content just has the space it needs to live so i'm a very big fan of using padding to create that spacing because padding will always include your background color or your background image now and we're gonna before we actually get this looking a little bit better another thing when it comes to the path here i haven't organized things in the best way possible over here because i do have my css file in a css folder but then i just have these images floating around so it is very common to have an image folder so either write images you know images like that or img and then having all of the images in there and again that's going to break things we don't have a path to our css file anymore and that's because we're not looking into my images folder we've taken that one step back we're now in the root folder but now we have to go and find that images folder and say to look inside of there so one thing just really fast if ever you're in the situation where you think you've written things well but it's not working what i'm going to recommend you do is right click and choose inspect yeah i am in firefox right now if you're writing css and especially if you're new to css i do strongly recommend firefox over chrome there's a few little extra features that it has for css debugging that are really really nice especially for beginners but here what i'm going to do is in my dev tools that have opened up i'm going to select the hero which is where we put our background image and both here and here you can see you might be on layout here but you'll see it right here where it says background image and if you hover over and it says could not load the image it means it can't find the image so it means one of two things you either have a typo so maybe i wrote background small with one l or something like that so there's a typo somewhere here or you're not pointing to the right place so just double check your path you go oh i'm in my css file i need to exit out of there so we have the two dots and then i have to go into my images folder so then i can add that in we'll write images forward slash so go a step back find my images folder then find my landscape small we'll come and hit save and then my image comes back in and now if we come in look uh or actually we'll refresh and come and take a look and now you can actually see it will preview the image now this can be really useful and we'll see why when we go to the bigger version of the image but we're going to start with the small one we'll also see what happens if we take an image that's too big um but the first thing we're going to do and whenever i'm using there is a background shorthand if you just write background like this you can actually control everything you want on that i don't recommend it because you have to put things in a very specific order and it can be really if you muck things up or just make one small mistake there it just stops it from working and it just makes it a lot more obvious i want my background image and then we're going to do a background background repeat and then you can choose no repeat and it won't repeat anymore so you just have the image one time or if you only want it to repeat one way or the other way you can also do that with a repeat say y and it only repeats on the y axis or repeat x and it only repeats that way with an image like this though we tend not to want to do that it's more with patterns and other stuff that you might choose that you do want the repeating to happen and actually to show you what i'm talking about for that just really quick i'm going to add this image here uh called pattern.png so we're going to take this we're going to change it from my small landscape to my pattern dot png which also you know this file extension is very very important so do watch out for that and now you can see i get this pattern that's coming in my background this is why we like to repeat things because if i put a no repeat on here no repeat it's actually this small little image like this so if you have a repeating pattern that's why you know having a repeat on there repeat which is the default or i could just turn that off then it actually goes oh okay i can get this one small image doesn't have to load in a big file and then i can get it to fill in that whole area so that's why you might want to leave the repeat on but let's turn this back to my landscape small dot jpeg we need the extension like i just mentioned um and so we can turn off the repeating we can actually play with background positioning as well i'm not gonna stress about that one too much in this video but i do have another video where i went more into the different controls we can have so i will link that one in the description as well and i'll mention at the end so you don't forget um if you want to check it out but what i'm actually going to do is when we have a small image and it's repeating like this often we actually want this image to fill up the entire space and what i would recommend is having a bigger image but you want to have something that's more or less the right size because let's just come in with another problem i do have the exact same image but a big version of it where sometimes you come in and you'll set something like this and i can't even see any of my image or very few and i've seen this happen where the top right of the image is actually white and then the image comes in later on so when you set that background image you don't actually think it's there and you don't think it's working and again that's where you can go to your inspect and the inspect here is the same in chrome so if you did this there it would still work but you can see if i come in i can actually see that whole image is there but what's actually happening is i'm just seeing the top right of that image because the image is so big so if you have that where it's too small it's going to repeat and if it's too big then you run into a problem with it as well so i am on windows and i've opened my image here just in the windows image previewer thing and i am on windows 11 so yours might look a little bit different but if i right click on it i can actually go to resize and i can choose a size that i want to be using you can do custom dimensions or choose one of the ones that they suggest and in general for a background image you probably don't need bigger than 1200 pixels i'm not saying this is a hundred percent as like a set rule but just as a very quick but it should more or less do the job there are times where you might need it bigger there are times you might be able to have it smaller but as a rule of thumb you could start with something like that and for the quality we want to try and keep the file size pretty small so it is something we can play with there are better white now there are better ways to create more optimized images we're not worried about that let's just hit save resize copy um so there it is it's in my structure so we're gonna come in and say landscape medium and hit save and now there we go that looks a little bit better yes uh the thing is if it is a background image it will be cropping it and i did say it's 1200 pixels so if i do make this bigger at one point it will start tiling because it's you know it's doing 1200 pixels and then it will tile that way or if i do make my padding bigger on the top and the bottom it's all it still will tile the other way as well and obviously we don't want it to tile so what we can do is use background background size of cover and hit save and then what it's doing is it's ensuring the browser's saying okay i'm going to take this whole image i'm going to make sure it fits in this entire space now that does mean the image will be cropped so depending you know here i'm cutting off a lot of the bottom of the image and it will not show the entire image but do remember even though it's not showing you the entire image it's a background image the text is what's more important the background is not what's the most important here the image is adding a decoration the text is always what's most important so it shouldn't matter too much if parts of the image are getting cropped away but again we can position and play around the settings on this a little bit to sometimes show the most important part of the image but again if you want to see more about that there is that video that i mentioned on controlling background images that goes much more in depth um that you can use but i do think this is that basic thing that you want where you use your background size cover you get it to fit it's also going to adapt for small screens that way too so it's covering this way it's covering that way and it should work pretty well overall and that's usually what people are looking for most of the time now the one issue with the background size cover and that's why i created a medium image and i didn't leave it with my small one is it will stretch the image so you see how blurry it is now that i switched it to my small let's go back to my medium and the image becomes much more crisp because it's if you're going with an image that's too small what it's doing is it's taking that very small image and it's stretching it to fit and it's just losing quality and losing quality and losing quality and then you're going well kevin couldn't use your background your landscape large and the cover would just shrink it down to fit and yes you would be right but that original image was 2.8 megabytes and a very big thing on the web is trying to optimize things as much as possible we're not worrying too much about it here we didn't go to like an extreme length to come up with a perfectly optimized image at this point but don't come in with these giant images that you've downloaded from on splash or pixels or wherever it is you're getting your images we want to find sort of a nice balance and not go too big just because the file sizes they get ridiculously huge and i've actually seen people crash browsers because they were bringing in too many really big images that's a bit of an extreme case but just to let you know it is possible and it just really slows down your pages once they're online so we do want to pay a bit of attention to the file size that we are dealing with now as i said we want to make sure the text is readable and that can actually be really hard uh when we have things like this um and right now my text is not readable or it's borderline readable but i would argue that it's not um and that's because i have the color white here so we could turn that off and that's that's easier to read or if i had a different dark color it would be easier to read as well and so it is very important to choose colors that work well on your background image super super super important to do that the one problem is when we have images like this and it's not positioned on the sky anymore it becomes a little bit trickier and that means there's two choices one of them is picking background images that are always just going to work or you edit them in an image editing software to ensure that they're very low contrast and things like that because one thing we can't do is change the opacity of a background image um so you're sort of stuck with the image that you have to a certain extent but i will show you a little tip or trick and what i'm going to do on this one is we're going to change our color back to white and when you have a background color and you have a background image what's happening is the background color is still there but it's behind the image like we saw at the very beginning and so what we can do is we can actually use something called background blend mode this is a bit more of an advanced tip but i just want to throw it out there because it's kind of fun background blend mode and on my background blend mode there's a few different ones but there's only two that you ever really have to remember one of them is if you want to darken things you're going to use multiply multiply so let's hit save and what it's doing is it's blending this image with the color and it's choosing all the darkest things so if so it's always gonna it's gonna darken things and let white text be very readable and it sort of gives you that decorational feel because remember background images should be decorational maybe you want it the other way around though where you actually have a light color that's coming in here and so let's just say i came here and i came in with this really light color instead and in vs code you should get these little previews on your css colors i didn't have it before but um i just flipped the setting with the default setting it should be on and if you just hover on top you'll get the color picker so i'm just going to switch to a really light color for this example and you can see that it's it's going in a lighter but another thing we can do is actually switch dark multiply to lighten and if we go with lighten you can see it's going with the lightest colors so maybe that's not the nicest thing but we can let's change the color more into the blues maybe go a little bit darker and then we still get the everything coming through but maybe now we could actually go with a black or a dark color text and it's still going to be easy enough to read so a little bit more of like an advanced little tip there but you can blend the two together which is really fun and you know we're learning the basics but it's still important to to have some fun with what we're doing and as i promised i would remind you that i do have that video where i go into how we can actually get a lot more control on our background images we can do a lot more to actually position them where we want within the background and do some other things with them so if you'd like to watch that video it is right here for your viewing pleasure or linked right down in the description and with that i want to say a very big thank you to my supporters of awesome over on patreon jan johnny stewart tim and doug as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome