How to use background-size in CSS
JetThoughts Dev
Posted on June 17, 2022
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;
Size in pixels or percentage
background-size: 300px;
background-size: 15%;
Contain
background-size: contain;
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;
Background-Position
The background-position
CSS property sets the initial position for each background image.
background-position: center;
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;
💖 💪 🙅 🚩
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.