In this CSS code why do they specify "background-position: bottom center;"?


I have a question about the code in the Margins II exercise for HTML/CSS

I am not sure why they specify "background-position: bottom center;" because the result is the same without this code, and also the background image isn't at the bottom center, it is at the top center.... The bit of code I am referring to is below:

.banner {
background-image: url("");
background-size: cover;
background-position: bottom center;
height: 700px;
width: 100%;

what is the purpose of the background-position tag?


Correction, property, not tag.

The position property tells the browser where to draw the background. In this case, the background image will rest on the bottom of the container element, and will be centered.

Consider where the supplied image is smaller than the viewport. The above rule will let the top of the image (or the left and right edges) be trimmed. It depends how the image renders in the background-size property. If the image fits the height but not the width, it is expanded so the left and right edges reach the side edges of the viewport. The top of the image will be trimmed. If the image fits the width but is short of the height, then it is expanded to fit the height, and the left and right edges are trimmed.

When the image is larger, similar to above, it is squeezed to fit either the height or the width, depending which permits full coverage of the viewport.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.