Samuel Rocky Samuel Rocky - 4 months ago 13
CSS Question

background: 50% 50% / cover; What does it mean?

.slide{
background: 50% 50% / cover;
}


What does
background: 50% 50% / cover
do?

I know background syntax is like this
http://www.w3schools.com/css/css_background.asp

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}


But why in my code there is
50% 50% / cover
?

Answer

A. background-position:50% 50%

the background-position has these values position( left/right/center top/center/bottom) |x% y%|xpos ypos|initial|inherit;

background-position:50% 50% means

The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%

read here more background-position

B. background-size:cover

the background-size property can have these values background-size: auto|length|cover|contain|initial|inherit;

background-size:cover does this :

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

see here background-size

so in your code :

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

right top is the background-position so 50% 50% will be in their place. also you don't have a background-size set so it's value is auto

if you want to combine the two codes just write like this

body {
background: url("img_tree.png") no-repeat 50% 50% / cover #ffffff ;
}

Which translates into

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
background-color:#fff;
}