CODEWITHSUNDEEP
css
ditto
ditto

Reputation: 6287

Shorthand Background Property

What would be the shorthand background property for the below?

body {
    background-color:#161515;
    background-image:-webkit-linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%), -webkit-linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%);
    background-image:linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%), linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%);
    background-position:0 0, 20px 20px;
    background-size:40px 40px;
}

My failed attempt:

background: #161515 linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%), linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%) 0 0, 20px 20px / 40px 40px;

Fiddle: http://jsfiddle.net/sw5sevnt/1/

I believe it's crapping out because of the background position: 0 0, 20px 20px

Upvotes: 0

Views: 81

Answers (1)

BoltClock
BoltClock

Reputation: 724112

In the background shorthand, you specify all the longhands in each comma-separated value. This means your background-position values need to be distributed to each gradient, and the background color needs to go into the very last layer (it may appear anywhere in that layer so long as it's in the last one):

background: linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%) 0 0/40px 40px,
            linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%) 20px 20px/40px 40px #161515;

Note that since you have only one value for your background-size longhand, that same value needs to be repeated across both layers. The spec contains details on how layered shorthand declarations map to their respective longhands.

Note also that you will need to repeat this shorthand for the prefixed gradients, otherwise browsers that don't recognize the unprefixed gradients will ignore the entire shorthand declaration. Since you're dealing with prefixed gradients, I highly recommend using longhands instead so you can specify background-image on its own without having to worry about the other properties.

Upvotes: 1

Related Questions