Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you assign a background image to an element the image is positioned with this top left-hand corner aligned with the top left-hand corner of the element. Although this is the default, you have a lot of control over exactly how and where background images are positioned inside of elements. You can control positioning of background images through three types of values: keywords, links, and percentages. As a general rule images are easier to position using keyboards or links. Percentages require a little bit more planning, so we'll address them shortly. We will tackle the use of keywords first, since they're the easiest to implement.
Background positioning contains five keywords, top, bottom, center, left, and right. Left and right obviously apply to horizontal placement, and top and bottom apply to vertical placement. Center can be used for both. It doesn't matter which keywords are used and if only one value is given, the other value defaults to center, which might not be what you are looking for, so you need to pay attention to that. So, here we have the 06_04 file open and we are going to concentrate our efforts on positioning our skull icon. You will notice I have applied a background color to the header element so that we can more clearly see how the skull icon is being positioned inside the element.
So I'm going to go to my CSS Styles panels and I'm going to locate our #mainContent. article h1 selector. So, you can see here is our background property, but we haven't really done any positioning for this yet. Now there are a couple of different ways to add this and I'm want to show you how to add this using shorthand notations. So, one of the things I'm going to do is stretch my CSS Styles panel a good bit over. I would still want to be able to see my header, but I do also want to be able to see my entire shorthand notation for my background. So, I'm going to click right beside no-repeat and type in a space.
Like other shorthand notations you don't use commas to separate the properties, you just use a space. So, now I'm going to go ahead and position that to top left and hit Return. Well, I notice that in Design view I don't see any visual change. That's because top and left are the defaults. So I'm going to go ahead and highlight those values again and let's try a new set. Let's type in bottom right. Now, I notice that the icon positions itself bottom right-hand corner to bottom right-hand corner of our heading 1 element.
Now you will also notice that it doesn't really matter when we use keywords whether the horizontal or vertical elements come first. When you use links, you need to put the horizontal first and the vertical second, but for keywords it doesn't really matter. Now speaking of that, I'm going to take my keywords and I'm going to change him just to the keyword of top. So I'm only going to pass my one keyword and let's see what happens then. Now, as soon as I do that, vertically it moves to the top, but you will notice horizontally it moved to the center. So if you only pass along one keyword, the other keyword defaults to center and that's something that you need to aware of.
Now, instead of using keywords, you can use calculated length values. When using those length values the horizontal value must come first. You can use any unit of measurement you like and the image will be positioned by its top left-hand corner offset by the top left hand corner of the element itself. You can use negative values, although they generally result in a section of the image being clipped. Keep in mind that only specifying one value still results in the other value defaulting to center. Now I'm going to change my positioning. I'm going to replace top and I'm going to pass two values. 10px 30px.
When I hit Return, notice what's happening. It's going 10 pixels over and 30 pixels down. So top left-hand corner to top left-hand corner. Well, we don't have to use pixels. We can also use units of measurements like ems, so, 1em. Notice now that we have an offset moving one em over and one em down. That's typically calculating to about 16 pixels, but it also depends on the element itself. In this case, it's a header, so it's a little larger than that. Now, if I just change that and pass one value, just 1em, notice what happens.
The horizontal moves over to 1em, but vertical being the second value defaults to center and that's where we are. Now, let's just try some keywords, because I think we can use keywords to get it where we need. I'm going to type in left for the horizontal, center for vertical, hit Return and sure enough there it is. I'm also going to go ahead and move that background color. We don't need it anymore. We're just sort of identifying where the image is going to be and hit Enter. And now our icon is showing up exactly where we need to. Wonderful! Now that gives us an idea of how to control background positioning using percentage values instead of lengths or keywords. It works a little differently.
So, in our next exercise we are going to explore these differences and how to control background image positioning using percentage values.
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.