We can replace four lines of code with only one using shorthands!
background: linear-gradient(12deg, #9c7842 19%, transparent 75%); background-position: 0px 0px; background-size: 100px 200px; background-repeat: no-repeat;
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
- 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.