In the Background: Simplifying and Demystifying CSS Backgrounds
April 9th, 2008 in Design Tips & Tutorials
by: Matthew Griffin
If you've been designing websites for awhile then you probably remember this: <body background="bg.jpg">. I wrote a lot of websites like that before CSS arrived, but when I tried to remember how backgrounds worked back then, I honestly had to look it up—it looks completely alien now. There's little chance that you're still using HTML like that (although there are still some old school tutorials floating around out there); but a lot of web designers have never taken the time to really explore and understand the background property in CSS. In this article, I'm going to give a quick rundown of how to use the background property effectively and eliminate all the background-position, background-color, and other redundant properties.
Background Review
I'm not going to spend a lot of time going over what the background property is and does, but I do want to touch on it briefly. In case it's not obvious, the background property controls backgrounds. But seriously, in CSS, background properties can be applied to almost any HTML element; from the body of a page to a paragraph. Using the background property you can control the color, location, image, and all kinds of other characteristics of a background. Now, let's jump into it.
Background Sub-properties
The background property has five sub-properties that can function independently of "background". You probably know what these do but if you need a refresher, you can go to the W3School.com explanation. They are:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
So, for example, if you wanted to change the background color, image, image position, and image repeat of a page, your CSS could look like this:
background-color: #000;
background-image: url("bg.jpg");
background-position: top center;
background-repeat: repeat-x;
}
But using these sub-properties individually is an unnecessary burden. Using just the background property, you can accomplish the same thing with one line of code:
background: #000 url("bg.jpg") repeat-x top center;
}
Much easier, right?
The Basics of Background
The background properties will work in pretty much any order. This was something that confused me when I first switch over to CSS. Most tutorials just list out the properties but don't bother to mention that they'll work in any order. For example, the CSS above could be rewritten like this:
background: url("bg.jpg") top center #000 repeat-x;
}
The only property that may give you some trouble if it's out of order is the background-position property, but I'll explain that in the next section. Also, for the sake of readability, it's best to put your properties in the same order every time. The generally accepted standard is: background-color | background-image | background-repeat | background-attachment | background-position. When you type them into your stylesheet, just put a space between each property like I did in the examples above. The browser will figure out what's what.
That Sneaky background-position
Most of the background properties are self-explanatory so I won't spend a bunch of time explaining what background-color and background-image are. On the other hand background-position is worth a mention. Background-position has given me a lot of trouble in the past; and I finally had to just sit down and mess with it until it sunk in.
The first thing to remember is that when you use the horizontal offset property, you should always specify a vertical offset as well, and vice versa. Even in situation where one or the other has a value of 0. If you don't specify both, funky stuff will happen. Start with the horizontal (x-axis), then the vertical (y-axis). The horizontal can be a pixel width, a percentage, or an alignment specifier (left, center, or right). The vertical can be a pixel width or a percentage just like the horizontal, but its alignment specifiers are top, center and bottom. So, for example if you want to place your background image in the upper left-hand corner of the page, you would do this:
background: url("bg.jpg") no-repeat left top;
}
Now for something a little more complicated. If you wanted your background image offset from the left side by 20 percent of the page width and offset 20 pixel from the top, you would do this:
background: url("bg.jpg") no-repeat 20% 20px;
}
IMPORTANT: Even though technically you can use "bottom" and percentages for the vertical image position, they won't work in Firefox. Don't use them.
Before I close out, I know there are some CSS junkies out there who are going to get onto me for saying that vertical image position needs to come before horizontal. Technically, if you're only using alignment specifiers (top, bottom, left, right, etc) you can put them in whatever order you want. But as soon as you try to go to percentages and pixel widths, it won't work anymore. That's why I think it's best to stick to the order I described.
I hope this clears a little fog from the background property. I know this is simple stuff but the simple stuff is usually where we fall short.
- 25 Comments
- 21956 Views
Comments
Posted By: E. I. Sanchez on 04/10/08
CSS is such a monsters that little reminders like this are good. I use HTML+Kit to edit html, php and CSS. I often wonder how others code their pages - especially CSS. How do people figure out color codes?
Posted By: Matthew Grffin on 04/10/08
Edgar, I know there are some good free color picking tools out there. But the best overall are probably Dreamweaver with its inline color picker and Photoshop with its color dropper tool.
Posted By: Ozan Caglargil on 04/10/08
You don't have to specify background position for "left top", because that's the default value for position..
Posted By: Andrija on 05/04/08
@Ozan This is nice tip, I always forget this.
Posted By: e devlet on 06/17/08
css background examples , Properties , Attribute - - css-lessons.ucoz.com/background-css-examples.htm
Posted By: Zeb on 07/24/08
I wonder if there is a way where we can repeat the background image and position it at the same time. something like this: background: url("bg.jpg") repeat-x left 25px;