Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the properties that is often associated with the box model but isn't technically a part of it is the background property. The background property allows you to control how the background of an element displays. There are many different background properties that allow us to control the color of the background, whether we want to display an image in the element's background and ways to control that image display. Now we are going to explore those in detail in just a moment. For now, let's focus on just defining a background and understanding how the background area of an element is determined.
So here I have the background.htm file open from the 05_08 folder and we just have one lonely little paragraph down here that says, I am The background property. Okay, fair enough. So in the add style section, I am going to go ahead and add a paragraph selector and inside that I am just going to type in background-color, it's one of our background properties and I am just going to go ahead and use one of the defined keywords yellow. So if I save this and I preview this in one of my browsers, I have my paragraph right there, and indeed it's background is yellow, but how do we determine or how does the browser determined what size to make the background, or how large to make it, or what's included in the background.
Well remember, backgrounds go all the way up to the beginning edge of the border of an element. So any padding would be considered part of the background, certainly any of the element content would be considered part of it as well, so if I go back into my code and I go in and say, all right, let's give it a width of 300 pixels, let's give it a height of 300 pixels, and let's just go and give it some padding of say 100 pixels. So I save this and preview that in the browser, you can see that now 300x300 pixels with the padding added to it, so that's a little bit of a additional space there, there is the background of the element.
So it goes all the way up to where the edge of the element would be, and if we go back and we take away the padding and Save that and test it, you will see that now just the height and the width are defining that sort of background area. You don't have to always use those individual properties, later on in this chapter we well talk more about the background shorthand notation, but most of time it's easy enough to just go ahead and say background, you don't have to always explicitly say background color or even background image. You can just say background. And if I save that and test it, you can see that it really gives me no change to it whatsoever, so that's acceptable shorthand notation.
Okay, so now that we know how to properly set the background property and we also know how browsers define the area of the background, we can move on to discussing other background properties that we can set and we are going to start that discussion by discussing background images in our next movie.
Get unlimited access to all courses for just $25/month.Become a member