How to use background-size in CSS

jetthoughts-dev

JetThoughts Dev

Posted on June 17, 2022

How to use background-size in CSS

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

💖 💪 🙅 🚩
jetthoughts-dev
JetThoughts Dev

Posted on June 17, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related