CSS Backgrounds
You might have noticed on the last page that our style declarations were getting a bit many what with a declaration for each property of the background. Here we're going to show you how to use the shortcut property and combine a bunch of properties and values into one rule. It goes something like this:
background:blue url(images/myImage.jpg) no-repeat 100px 200px fixed;
}
The background: is a generic reference to all the background properties. We can access many of the properties and values in one style rule using this shortcut.
Some thought has to be put into using this shortcut. for example, it wouldn't make much sense to set the position of the background image when you haven't set it to no-repeat. The image is just going to tile and fill the page.
Other times when things don't work like they're supposed to, all you may have to do is change the order of the values. Play around a bit with it and see what you can and can't do. In the mean time, HERE'S a page that exemplifies the code above.
That's a pretty long rule but well shows the power of the short cut property. Below is another, simpler one to get you thinking about what you can do with it.
background:url(images/backgrounds1.png) repeat-y top right;
}
Remember to leave a space between each value otherwise the browser may not know where one ends and the other begins. As you see here, the shortcut property can save quite a bit of time coding and reduce the size of your files. Get comfortable with it, your going to see it a lot more with the other categories of style properties.
With that all said, it's time to move on to fonts.
