.background-div {

background: red url(”image.png”) no-repeat right bottom fixed;

}

Not only does this speed up page load due to the decrease in size of the css (less lines of code = smaller file size, remember), it also speeds up development time as the developer doesn’t need to enter each of the property names individually.

The only restriction imposed on the order of the property values is the horizontal then vertical condition of the background-position value; other than that, the values can be entered in any order at all. Trust me – this speeds up development more than you can possibly imagine.

The box model part 2

We’ve already discussed the importance of the box model. Here is where we can start to see the concept in use a little bit more. Let’s take another look at the makeup of an element in HTML (see Figure 5.11).

5.11

Familiarizing yourself with this visual representation will help you to understand the upcoming parts of this section. Got it? Great, now let’s look at setting the size of an element.

Widths and heights

If you cast your mind back to when we rendered our first image back in Chapter 3, you might remember we saw the width and height properties that we applied directly to the image. Well, these are the same properties we use for sizing all elements using CSS too, just simply ‘width’ and ‘height’. The values for the width and height can be specified in length (pixel, em, etc) or percentage formats, like so: