Backgrounds

The background property

The background property gives us the ability to edit the background characteristics of an element. Since it’s a shorthand property, we can write multiple properties in one block of code. For example:

body {
  background:
     fixed                    /* attachment *
     blue;                    /* color */
     content-box              /* clip */
     url(background.jpg)      /* image */
     padding-box              /* origin */
     top center 300px 300px   /* position & size */
     no-repeat                /* repeat */
}

This example contains the different properties that we can apply to backgrounds. Don’t forget about the property order!

Note: Image elements also have a background. It’s good practice to set a background-color as a back-up plan in case the original image is unavailable.

Let’s explore each background property in more detail.

The background-attachment property

The background of an element can be changed using the following properties:

• background-attachment
• background-color
• background-clip
• background-image
• background-origin
• background-position
• background-repeat
• background-size

The background-attachment property

The background-attachment property helps us define how the background moves relative to the viewport. We can use the scroll, fixed, or local.

The default value is scroll, and ensures that the background scrolls along with the page.

The fixed value attaches the background to the viewport so that scrolling doesn’t affect the background.