css30 Oct 2021

Background shorthand

CSS background has many properties. We can combine many lines with only one using shorthand. Let's see how to replace four major ones with only one line.

We can replace four lines of code with only one using shorthands!

Before:

background: linear-gradient(12deg, #9c7842 19%, transparent 75%);
background-position: 0px 0px;
background-size: 100px 200px;
background-repeat: no-repeat;

After:

background: linear-gradient(12deg, #9c7842 19%, transparent 75%) 0px 0px / 100px
 200px no-repeat;

Let's see what is going on here:

first of all, we are using background property
first part is our gradient
second part is our position of the background
then we have a position-size separator
after the separator, we have background-size
the last part is property repeat

This is not over! Background can have more properties:

background:
   url(path_to_image.png) /* image */
   top center / 50px 50px /* position / size */
   no-repeat              /* repeat */
   scroll                 /* attachment */
   content-box            /* origin */
   padding-box            /* clip */
   black;                 /* color */

Background shorthand is necessary while creating single-div illustrations.

Background shorthand

Got something that needs building?