Styling Background Images

In the previous chapter we saw how the background-image property is used to give background images to HTML elements. In this chapter we shall see how to style these images in multiple ways by changing their sizing, repeating patterns, positions, origin and so on. This chapter will be surely long so read thoroughly and carefully.

We'll start with seeing how can we alter the size of a background image using the background-size property.

It can take the following values:

1. auto sets the image with its original dimensions. This is the default.
2. cover covers the element with the image
3. contain gets the image to be contained within the element
4. A type <length> value

Consider the example below where we demonstrate all the different values of background-size.

p {
    background-image: url("back.png");
    background-repeat: no-repeat;
    background-size: cover; /* cover the entire element */
}

Or the values could've been:

p {
    background-size: cover;
    /* will get the image cover the whole element */
    /* as a result the image might overflow */

    background-size: contain;
    /* will get the image fit into the container */

    background-size: 500px;
    /* will set the width of the image to 500px */
    /* the height will scale proportionally */

    background-size: 50em;
    /* another unit */

    background-size: 50%;
    /* 50% width of the container */
}

Background Image Sizing

By default when we embed any background image to an HTML element it is repeated in both x and y directions.

To control this behavior we can use the background-repeat property. It is a shorthand property for the background-repeat-x and background-repeat-y properties.

The values for all these three properties include no-repeat which removes the repetition and repeat which simply allows it. For background-repeat we can have two additional properties repeat-x and repeat-y that will respectively get the repetition to be applied in the given direction.

The following code sets the background image to not to be repeated in both x and y directions:

p {
    background-repeat: no-repeat;
}

Some other values could've been:

p {
    background-repeat: repeat; /* repeat in both x and y */
    background-repeat: repeat-x; /* repeat in x ONLY */
    background-repeat: repeat-y; /* repeat in y ONLY */
}

Another important aspect of styling background images, is to get them positioned. The property which deals with this is background-position.

On the horizontal axis (x-axis) an image can be positioned either to the left, the center or to the right. Similarly on the vertical axis (y-axis) an image can be positioned either to the top, the center or to the bottom. We can't position an image to the horizontally to the top, vertically to the left!

Likewise we have the values left, center and right for x-positioning and top, center and bottom for y-positioning.

The property background-position can take either one or two parameters. With a single parameter, the other one will be defaulted to center. With two parameters it will automatically detect which value is given for which axis and apply correspondingly, although the first value is expected to be for the x-direction.

A simple example with the property is shown below:

p {
    background-position: center;
    /* position the image to the center horizontally and vertically */
}

See the following list for all possible image positions:

p {
    background-position: right; /* image to the right */
    background-position: center; /* image at the perfect center */

    background-position: right center; /* right in x and center in y */
    background-position: center bottom; /* center in x and bottom in y */
    background-position: bottom center; /* same as above */
}

background-position can also take <length> values. As before, if you give one value, the other one becomes center. If you give two values they are parsed in the order x y.

Consider the example below:

p {
    background-position: -10px 50px;
    /* x-position: -10px */
    /* y-position: 50px */
}

A couple of permutations of values are shown below:

p {
    background-position: 50px;
    /* 50px in x and center in y */

    background-position: 50px 100px;
    /* 50px in x and 100px in y */

    background-position: 100px 50px; 
    /* 100px in x and 50px in y */

    background-position: -100px; 
    /* -100px in x and center in y */

    background-position: -50px -100px;
    /* -50px in x and -100px in y */
}

To specify the origin i.e the container of a background image we can use the background-origin property. It defines in which bounding box the background image will sit.

The values include content-box, border-box and padding-box which place the image in the respective boxes.

If you don't know what are these different types of boxes you can check out Bounding Boxes.

Consider the example below demonstrating all three values. We've used background-size: contain so that you can more clearly see which box is being filled up by the image in each case.

p {
    background-origin: border-box;
    /* image originates from the border box */

    background-origin: padding-box;
    /* image originates from the padding box */

    background-origin: content-box;
    /* image originates from the content box */
}

Now we've successfully learnt how to style background images in CSS in multiple ways using multiple properties. Just for a quick recap name all the properties discussed on this page with their purpose. If you able to do so then you are in a really good position to go to the next chapter, but if not then you shall considering reading this chapter again.

In the next chapter we will see the last topic of CSS backgrounds known as gradients after which we will be testing out your skills once again. So keep going if you are in good form and haven't been reading for a long while!