Launch a career as a web designer by learning HTML5, CSS3, responsive design, Sass and more!
10:54:26 of on-demand video • Updated July 2020
Create any website layout you can imagine
Support any device size with Responsive (mobile-friendly) Design
Add tasteful animations and effects with CSS3
Use common vocabulary from the design industry
In this lesson we will learn about background images. You are already familiar with the background color property and the background image property is very similar except instead of using a solid color. It allows us to import an image file to be used as a background. Now in the H TMLC section of the course we learned about the I MGM element which lets us add an image to the content of the page. However when we want to add imagery to our pages for stylistic reasons where the image isn't exactly content in and of itself we can use CSSA to apply background images to different elements. Now I think this will make more sense as soon as we hop into an example. So let's get started. Here's an example page. And let's imagine that I want to add a background image that sits at the top of this overall white container element in the folder where our website file lives. We can see that I have a folder named images and within that folder I have a file named color tile and if I zoom in or blow the file up you can see that it's nothing more than a Green Square and a yellow square. Now if we want to apply this image as a background for this overall white container I will simply find the container element rule in my style sheet. Here it is. And I will add a new property background image you Arel and this is where we point the web browser to the image file. Now the could that we write needs to be relative. From the CSSA file. So for example the CSSA file lives within the CSSA folder. So first we need to go up a folder dot dot slash that will bring this outside of the CSSA folder. Then we want to go inside the images folder. So images slash. And then we simply type the name of the file. So color tile doc PFG And if we save and refresh we can see that this looks terrible. Now by default background images will repeat or tile both horizontally and vertically in an attempt to fill up the entire element that you applied the background image to. Now like I said this looks terrible. So let's stop the browser from repeating or tiling the image. We will add a new property named background repeat and we will provide it a value of no hyphen. Repeat. Much better. However I did actually want the image to tile or repeat horizontally just not vertically. So to achieve that instead of no repeat you can specify. Repeat x. So this will tile the image along the x axis or horizontally perfect. And if we wanted to tile the image only vertically we could see a repeat y. However that's not what we want. That's not the way I'd design the image to work. So repeat x. So this is the visual effect that I was looking for a horizontal strip of alternating green and yellow blocks and by leveraging the repeat x property I was able to create the effect with a very small image . My web site visitors will be able to download this graphic file very quickly and then their web browser will do the heavy lifting of repeating it to fill the available space. Moving on next let's add a bit of top padding to the container element to counteract the space that this background image is now taking up padding top 15 pixels. Let's get back to learning more about background image properties. So let's imagine that we want to add a new image of this flower to the hetter area of our website. So first let's highlight the header so that we are on the same page and that we understand which area I'm discussing background color gray. So I'm referring to the space that is currently Gray. Actually let's remove the right side padding of the overall container element container turning right . Let's just remove this so that the left sits flush against the right edge. So let's imagine that we want to add that flower image to be a background for this gray area. So very quickly I will move that flower file to sit inside the images folder. And let's hop over to our CSS. Here is the header element that we want to add a background to. So I removed the background color property that was just to illustrate which section of the page was referring to. So we will save background image you RL parentheses. We want to go up a folder so that we're out of the CSSA folder then we want to dig into the images folder and the file name is floured J pig I see several adjustments that we should make. The first is that I want the background image to sit flush with the right side of our layout. So this extra white space should not be here. Now the background image file is only about this wide and by default background images will try and will line themselves with the left hand side of the element that they're being applied to. But we want it to align itself with the right side of the header. Now there is a CSSA property named background position which will let us customize its position. This property accepts two values. The first control is the horizontal position and the second value controls the vertical position so horizontally we want the image to align itself to the right. Now vertically is a bit trickier. So here is the photo or the image file. I'm interested in displaying the vertical center portion of the image. So if we look at our layout we can see that the header isn't very tall so we're only going to be able to fit a portion of the image. Now I'm not too worried about the top and I'm not too worried about the bottom. So for the vertical property I will include the keyword center. So if I save and refresh we can see the background image is positioning itself aligned to the right and vertically. We're seeing the sweet spot the vertical center of the image. The next adjustment that I will make is to tell the background to not repeat or tile so we can fix this on the left side. Background repeat no repeat. Excellent. Now the reason I chose an image that is much taller than the space that it's being applied to is because we never know how tall the head will grow to be. So for example what if we adjusted the navigation links so that they take up more space. So for example what if instead of 10 pixels of vertical padding they had 25 pixels of vertical padding so we can see that now more of our flower background image is able to shine through and be visible. So the key point here is that our layout doesn't break or look silly. If things grow a bit vertically typically in web design you don't want to micromanage the height of your content. You want to let it breathe and determine its own height by its own font sizes and padding and margin . And by providing an image that's a bit taller than the area we need we can sure that our layout does not break now very quickly let's fix these links that they don't have a ridiculous amount of vertical padding. And let's also give them a white background so that they stand out against the background image background color Triple F for white. So far we've learned about three new properties. Background image background repeat and background position. Now I want to introduce you to background size. So for example we can see this area a little bit down the page that reads birds are great and it has a beige or light brown background for the outer box. Let's imagine that we want to add this photograph of a bird to replace the beige background color. Clearly this photograph is much too large. Here's the actual size to fit in that beige box perfectly. But the background size property can save the day. So let's begin by adding that bird image to our images folder. Bird that J pig. And let's add that to this beige outer box to inner H.T. and now you can see that that is nothing more than a div with a class of birds. Here's the rule in our CSS. We can see this is where it's getting that beige background color. So I'm just going to create a new rule or excuse me a new decoration background image. Practice makes perfect so we're practicing our image syntax jump out of the folder that the CSSA file is and then jump into the images folder. The file name is bird J pig. If we refresh we can see there is the bird's head. So clearly the image is not the correct size. Let's at least try to position the image. So background position horizontally we will center the image and vertically will center the image. So at least now we're seeing the center of the image but it's still too large. So this is where the background size property comes into play. We have the option to specify a width and height value. So we could say the image should be 200 pixels wide and 120 pixels tall. Now obviously if that was the case we'd want to make sure that the background image does not repeat now clearly 200 pixels wide by a hundred and twenty pixels tall is not the correct dimensions. We want the image to use all of the available space. Now instead of worrying about trying to find those perfect pixel values to plug in we can simply race this and use a key word of cover and the web browser will do all the heavy lifting for us. It will automatically resize the background image to cover or fill the element that the background image is being applied to. Now this may not seem like that big of a feature at the moment but believe me when we start dealing with flexible layouts and responsive web design later on in the course we will learn that the ability to automatically resize background images is a lifesaver. Now before we move on to the next topic in this lesson I want to review a way that we can make our code much cleaner. So with the exception of background size we can combine all of these other background properties into one line of code. So lets race these lines and start a new line that simply reads background and we will supply all of the values on this one line of code. So the first thing we'll do is provide the solid background color fallback which was that beige color . Next we'll point the browser to the location of the image file so it will pop out in the CSSA folder then jump into the images folder file name was Berdahl big. Next we want to include the way that the image should be positioned so we were using center center and then we can specify how the image should be repeated or tiled. So we'll say no repeat if we save and refresh literally nothing changes. This is just a more efficient way of specifying all of these properties combining multiple properties into one line of code is referred to as CSSA shorthand. Now you will become familiar with this syntax over time but while you're just starting out if you'd prefer to use each value in property on it's own line that's absolutely OK now that you're familiar with the basics of background images and even shorthand. I want to cover one final advance topic before we end this lesson and that is adding multiple images to one element. So for example our first task in this lesson was to add the green and yellow stripes to the top of our container element. What if we also wanted to add the green and yellow stripes at the very bottom of our container element . Let's pop over to our C Ss to find the room for our container element. Here it is. I will begin by reducing all of these lines into one line using shorthand. So we'll say background we'll have a fallback color of white and point the browser to the image file images color tile dot TNG. We want it to be aligned in the left top corner. And we wanted to repeat on the x axis. Now our goal is to leave these properties intact so that our background at the top stays in place. But we want to add code so that the green and yellow tiles are also at the bottom. Now we can add multiple backgrounds to a single background property by using the comma. So now I can create another background where my cursor is that will get layered on top of the original background so will point the browser to the color tile or say that we want it to be positioned in the left bottom corner. And again we want to repeat along the x axis if we refresh we can see that we now have the background at the bottom of the element and we also retain the background at the top of our element the ability to add multiple background images to a single element is incredibly powerful. Here are a few notes you can create as many different layers as you would like by simply adding a comma after one layer whichever layer comes first will be closest to the top of the stack. Meaning whichever layer you include last will get overlapped by the preceding layers. Also whenever we use background images we should always provide a solid background color so that even if the image file fails to load at least visitors will see a correct color. Now you want to make sure that when you're including multiple background images for a single element that you include the background color in the final or last layer and that will bring this lesson to a close. We covered quite a bit of material. So here's a quick review. We learned the following new properties. Background image background ropy background position background size and we also learned how to add multiple background images to a single element. I encourage you to experiment with these new properties using your own images to create beautiful designs . I will see you in the next lesson