The background-size property in CSS is used to specify
the size of the background image of an element. It allows you to control how
the background image is scaled or resized to fit within the element's
background area.
Syntax
background-size: value;
How to specify background size value?
The background-size property accepts several values, each serving different purposes.
1. auto: The background image retains its original size. This is the default value. The image will be displayed at its intrinsic size, without any scaling.
background-size: auto;
2. length
You can specify the width and height of the background image using units like pixels (px), ems (em), percentages (%), etc.,
If you specify one value, it will set the width, and the height will automatically scale to maintain the aspect ratio.
If you specify two values (e.g., width height), the image will be scaled to those specific dimensions.
background-size: 100px 50px; background-size: 100px auto;
3. percentage
You can specify the size of the background image relative to the containing element.
If you specify one percentage, it will set the width relative to the element's width, and the height will auto-scale.
If you specify two percentages (e.g., width height), the image will scale according to those relative dimensions.
background-size: 50% 50%; background-size: 100% auto;
4. cover
The background image will scale to cover the entire area of the element while maintaining its aspect ratio. The image may be cropped if the aspect ratio of the image does not match the aspect ratio of the element.
background-size: cover;
5. contain
The background image will scale to the largest size that fits within the element's background area while maintaining its aspect ratio. The entire image will be visible, but there may be gaps or empty space if the aspect ratios differ.
The entire image will be visible, but there may be gaps or empty space if the aspect ratios differ.
greenary.jpg
backgroundSize.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Background-Size Property Examples</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; } .container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .box { border: 2px solid #333; background-image: url('../../images/greenary.jpg'); background-repeat: no-repeat; height: 200px; position: relative; } .box span { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 5px; font-size: 14px; } /* Examples */ .auto { background-size: auto; } .length { background-size: 100px 50px; } .length-auto { background-size: 100px auto; } .percent { background-size: 50% 50%; } .contain { background-size: contain; } .cover { background-size: cover; } </style> </head> <body> <h1>Examples of CSS Background-Size Property</h1> <div class="container"> <div class="box auto"> <span>background-size: auto;</span> </div> <div class="box length"> <span>background-size: 100px 50px;</span> </div> <div class="box length-auto"> <span>background-size: 100px auto;</span> </div> <div class="box percent"> <span>background-size: 50% 50%;</span> </div> <div class="box contain"> <span>background-size: contain;</span> </div> <div class="box cover"> <span>background-size: cover;</span> </div> </div> </body> </html>
Open ‘backgroundSize.html’ in a browser, you will see
below kind of screen.
No comments:
Post a Comment