CSS Background Shorthand Property

PROBLEM

Multiple CSS background properties in a single declaration.

For example:

background: url("image url") center center/cover no-repeat fixed padding-box border-box #ccc;
SOLUTION

All properties in a single declaration:

background: [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

At least one spacing character between each value, plus position and size properties must be seperated by forward slash as above. Order don’t really matter (except, size must follow position).

READ MORE:

I recommend this excellent article if you want to learn more:

CSS Background Shorthand Property
by William Craig

There are eight background properties, and minimum one property value is required for shorthand, others take on the following dafault values:
[Other values in square brackets.]

1. background-image: none; [url(myimagelocation.com) or url(“myimagelocation.com”) or url(‘myimagelocation.com’)]
2. background-position: 0% 0% [top left, center center, etc.]
3. background-size: auto [length(width-height), percentage(width-height), cover, contain]
4. background-repeat: repeat [repeat-x, repeat-y, no-repeat, space, round]
5. background-attachment: scroll [fixed, local]
6. background-origin: padding-box(The background image starts from the upper left corner of the padding edge) [border-box(The background image starts from the upper left corner of the border), content-box(The background image starts from the upper left corner of the content)]
7. background-clip: border-box(The background extends behind the border) [padding-box(The background extends to the inside edge of the border), content-box(The background extends to the edge of the content box)]
8. background-color: none [#fff, #a0b23, etc.]

CF7 FORM

    ELEMENTOR PRO FORM