Simplifying and Demystifying CSS Backgrounds
Simplifying and Demystifying CSS Backgrounds
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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.
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.
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:
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-position: top center;
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.
Opinions expressed by DZone contributors are their own.