How to use background-size in CSS

#css #html #webdev #jetthoughts

The CSS background-size property sets the size of the background image of the element. Images can be left to full size, stretched or limited to fit the available space.

background-image: url('some-example-image.jpg');

Cover #

background-size: cover;

Image description

Size in pixels or percentage #

background-size: 300px;

Image description

background-size: 15%;

Image description

Contain #

background-size: contain;

Image description

Background-Repeat #

If the container is larger than the image, this will mosaic the image if the background-repeat property is not set to no-repeat.

background-repeat: no-repeat;

Image description

Background-Position #

The background-position CSS property sets the initial position for each background image.

background-position: center;

Image description

Background-Color #

Spaces not covered by the background image are filled with the background-color property, and the background color will be visible on background images that have transparency.

background-color: lightgreen;

Image description

Comments