CSS Background Shorthand Tutorial

Working with CSS can provide a variety of options for customizing an HTML page. Of the more impactful and direct of these options is the background.  For ease of use, these options can be modified in a collective format via the CSS background-shorthand property. In this short tutorial, the aspects of this property will be reviewed and explained with examples.  

Understanding the “why” for this shorthand usage is key to knowing how to utilize it in CSS. By applying shorthand, the CSS designer can implement multiple property values in a single grouping. Not only can this provide a cleaner code view, but can also save time in design.

The CSS Background-Shorthand Property

To demonstrate the usefulness of the background-shorthand property, we first need to see why we are looking to use it in the first place. Take into consideration the following code set below.

body {
  background-color: gray;
  background-position: top;
  background-image: url("Udacity.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  }

All of the individual background properties are applied to the body selector. You will notice the code calls up elements of color, background image, positioning, and even repetition. This provides the following background to the HTML page.

The code provided the page with the desired result. However, it did so on five separate lines calling multiple properties in the process. While this is not always a negative form to use in your CSS design, it can be noted that in some cases this generates longer code than needed.  

This is where the power of the shorthand form comes through. The code can be simplified or shortened by merely calling all the declared values of the background property on the same line.  This is done by using the following syntax.

background: value value value value;

You first state the intended property, which of course would be “background.”  Afterward, a colon is provided. Next, each value is entered with a space provided after each.  Finally, the semicolon is added showing the end of the value list. Note that you can also format it in the following method as well.

Note the following code examples below where this CSS background shorthand is applied.  

  body {
  background: gray url("Udacity.JPG") no-repeat center top;
  }

This calls the shorthand property as discussed above. However, you can see the result is not the same in the image shown below.

You will notice that the image is now enlarged and no longer using the contain value as it was in the previous example provided. This has been done on purpose. It demonstrates the importance of the order used in the shorthand property.

The Order of the Background Shorthand Property

In order to correct the CSS so that the HTML background returns to normal, you have to first understand what values the shorthand property can work with. The shorthand property can call on the following background property values:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Note that the above list is not simply a bulleted set, but rather a numbered one. This is due to the fact that there is an ordered level of how these values should be entered. Now, this does not inherently mean that the code will fail if you do not follow the ordered listings. Simply that it may not work as intended since one value may override the other or simply be set to default.  

When a value is not called or used, the CSS will interpret that value as being left at whatever its own default value is. For example, if the background-repeat option is not specified the CSS will take it to be set to repeat on both the vertical and horizontal values. 

Also, note that if a background property were to be called independent of the shorthand, it can be overridden depending on how it was ordered. Take the following example to demonstrate this effect.  

  body {
  background-color: blue;
  background: gray no-repeat center top;
   }

This code will produce the following background on the page.

Notice that the background is now set to be gray, even though the background-color property was set to have a value of blue. This is due to the second provided value in the sheet being used as it does indeed cascade.  

Another interesting point to note is that if the color value is not provided in the shorthand property set, it reverts to the default value as mentioned above. The code below can be used to demonstrate this effect.

 body {
  background-color: blue;
  background: no-repeat center top;
   }

This will output the following background effect on the page.

Notice that the background is still not taking the color provided of blue, but instead uses the default coloring as the background shorthand property was called after the background-color property.  Altering the placement of the code also alters the cascading effect of the stylesheet.  Note the example below where the background-color property is called after the background shorthand property.

  body {
    background: no-repeat center top;
    background-color: blue;
   }

This in turn provides a blue background for the page.

This example demonstrates why it is important to consider the placement of the properties in your CSS as well as deeper concepts such as the ability to inherit values.

Background Properties Not Included In the Shorthand

With the order of the background shorthand properties in view, you can see part of the reason the code example provided did not correctly display the background as it was intended. The other half of that error is that it originally contained the background-size property as well. That property was set to the value of “cover.” This provides a full image cover to the background.    

Three background properties that you should consider calling directly are those of clip, size, and origin.  With that in mind, you can see an example for a fix of the error in the code shown below.

 body {
  background: gray url("Udacity.JPG") no-repeat center top;
  background-size: cover;
  }

You can note that the “background-size” property was simply added under the shorthand background property.  With this in place, you can see the image below for the effect output.

Once again, the image is now set to cover the background as previously intended along with the gray background coloring applied as well.  

Where to Go From Here?  

Using CSS to design the background of a page is only one aspect of a myriad set of creative options available to you. Exploring the use of color and spacing are other wonderful options to enhance the depth of designs. This can also lead to an in-depth concept of UX design interest that is a career opening skill set all its own. The digital sky is not the limit here; merely another option for your creative whims to work with.

———————————————————————-

The modern world runs on code and that code comes from people like you. If you are looking to fly farther and stronger than ever before, take the first steps with code. Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nano degree today to start the journey.

Start Learning