CSS Background Size

CSS background-size is a property that allows you to control the size of a background image within its containing element. It determines how the background image is scaled and displayed.

The background-size property accepts different values to control the size of the background image:

• auto: The default value, which displays the background image at its original size.
• cover: Scales the background image proportionally to cover the entire background area while potentially cropping parts of the image.
• contain: Scales the background image proportionally to fit within the background area completely without cropping, potentially leaving empty space.
• Length values: You can specify the size using pixel values (200px 150px) or percentage values (50% 75%) to control the width and height of the background image.

Examples

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-size: cover;
}
        
    

This scales the background image proportionally to cover the entire background area of the element while potentially cropping parts of the image.

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-size: contain;
}
        
    

This scales the background image proportionally to fit within the background area completely without cropping, potentially leaving empty space.

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-size: 200px 150px;
}
        
    

This sets the width of the background image to 200 pixels and the height to 150 pixels, regardless of the element's background area.

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-size: 50% 75%;
}
        
    

This scales the background image to 50% of the element's width and 75% of its height, maintaining the aspect ratio.

By adjusting the value of background-size and using different techniques, you can control the size and scaling behavior of the background image to achieve the desired visual effect for your web page.