How to use background-size in CSS

JetThoughts Dev - Jun 17 '22 - - Dev Community

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');
Enter fullscreen mode Exit fullscreen mode

Cover

background-size: cover;
Enter fullscreen mode Exit fullscreen mode

Image description

Size in pixels or percentage

background-size: 300px;
Enter fullscreen mode Exit fullscreen mode

Image description

background-size: 15%;
Enter fullscreen mode Exit fullscreen mode

Image description

Contain

background-size: contain;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Image description

Background-Position

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

background-position: center;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Image description

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player