Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In addition to using the background property to specify a color for an element's background, you can also use it to display an image. In this movie I want to introduce the background image property and discuss the syntax surrounding it. So here I have the background-image.htm file open, again, you can find that one in the 05_09 directory. We saw the same paragraph on the page, slightly different size, a little bit smaller this time around, and the first thing I want to do is to go ahead and apply a background image to this property.
So on a line just below the margin declaration there I want to do background-image. Okay, now this one has some pretty specific syntax, because one of the things that we have to do is we have to tell the browser where to go find this image at, and we do that by using URL and opening up some parentheses, and then passing the path to the image in there. You might notice if you can look over here in the 05_09 directory that we have a folder named _images and inside that we have this tweet_90.png file and that's what we want to display.
So we have to know the path to that image, so we're going to go ahead and type in _images/tweet_90.png that's the not so pleasant part of doing that, because you have to remember where that is, unless the authoring tool that you're using gives you the ability to browse out and find that image. So if you have an authoring tool that allows you to browse out and find these images, that's fine, because it's going to save you a little bit of time, but I've found that people that rely on those sort of lose side of the fact that this path is a relative path, and here's the important part, it's relative to the CSS, not the HTML.
Now in this case the HTML and the CSS are in the same file, so that relationship is exactly the same. However, if this CSS was an external cascading style sheet file, which it normally would be your path of these images needs to be relative to the CSS file, not the page you're using it in. Keep that in mind as well, if you're ever using this particular syntax. All right, so if I save this, and preview this in a browser, excellent. So there is my bird, and what's interesting about this is we're not really seeing everything the background image property can do right now.
Let's go back in our code and let's give this a background color as well. I'll simply go down to the next line and I'm going to type in background-color, and here I'm going to use the #9cf, which is a blue. I'm going to save that, preview it, and we get to see both the color and the image. So when you're using the background property, you can have an image and a color at the same time, there is absolutely nothing wrong with that. And the reason that we can see both of them at the same time is that this image is a transparent png file, if it was not, obviously the image is sitting on top of the color.
So keep that in mind, if you have an image and a color applied to the element, the image is going to sit or layer if you will, on top of the color. There are some default behaviors around this background image that you need to be aware of. Right now, we can't really see too much of this because our element is defined at 90 pixels x 90 pixels, which coincidentally enough is the exact size of that image, but what if the element was larger? I'll go into my code and I'm going to change this, so that the element is now 300 pixels x 300 pixels, so I'm going to save that, and test this again.
If we don't tell them otherwise, the browser is going to tile those images and you even have control over how it tiles. Let me show you that. So if we go back into our styles, I'm going to add another property underneath this, and this time I'm going to add background-repeat. Now this has several values that we can use, one value would be repeat, which is what it's doing right now, So if I just typed in the keyword repeat and tested this, we wouldn't see any change. Now we can also repeat along with specific axis. So if I say repeat-x and save that, notice that it's only repeating the image along the x axis and that is extremely useful.
You can create all sorts of really decorative borders or decorative backgrounds that way. A lot of people will fake gradients even though we can gradients with CSS now, by creating something smaller and just sort of repeating it along a specific axis. We can also repeat it along the y axis, so if I save this and test it, you can see the difference there as well. If you don't want it to repeat at all, you can just come in and say no-repeat. If I save that, it's not going to tile the image, it's just going to display the image one time. So the syntax we've looked at so far allows us to control which image we wanted to display in the element's background and whether or not or even how we want that image tiled.
It does not however allow us to control where within the element's background that the image is positioned. For example, the bird which is right now in the upper-left-hand corner, what if I wanted it in the center or at the bottom of this element? In the next movie we're going to learn how to use the background position property to do just that.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.