CODEWITHSUNDEEP
htmlcsswebvisual-web-developer
rflw
rflw

Reputation: 1775

CSS background syntax

I've seen an curious code example. I don't know completely what center center / cover means.
center center means center the background
cover means adjust the background to the area
But what does center center / cover mean?

background {transparent url(...) no-repeat scroll center center / cover;}

Upvotes: 0

Views: 81

Answers (2)

Ricardo
Ricardo

Reputation: 149

well, center center can only be specified in the background-position property so that is the background position and cover can only be specified in the background-size property so that is background-size,

these values only specify the size or position of the background-image used. Its a shorthand way of specifying all the properties and their values of the background property in one line. the forward slash is when you want to specify the position and the size.

for example:

background: colour url(...) position/size repeat clip origin attachment;

an example where sizes are used:

background: colour url(..) 50px(left-margin) 50px(top-margin)/50%(size) no-repeat scroll;

Upvotes: 0

joe_young
joe_young

Reputation: 4125

From https://developer.mozilla.org/en/docs/Web/CSS/background

<bg-size> See background-size. This property must be specified after <position>, separated with the '/' character.

i.e. it just seperates the background size from the position

Upvotes: 1

Related Questions