diff --git a/guide/english/css/background-size/index.md b/guide/english/css/background-size/index.md index 58bd041d5a..16d4d58e27 100644 --- a/guide/english/css/background-size/index.md +++ b/guide/english/css/background-size/index.md @@ -6,17 +6,32 @@ title: Background Size The `background-size` property specifies the size of the background images. You can set a length or a percentage, with the first value being the width and the second one being the height. You can also use one of the 5 keyword values: ```css -/* Background size property values that can be used */ +/* Background size property values that can be used: */ + .auto {background-size: auto;} +/* auto uses the default size of the background image*/ + .cover {background-size: cover;} +/* scales the image as much as possible without changing its aspect ratio it to cover the entire element, cropping when necessary to ensure no empty space remains.*/ + .contain {background-size: contain;} +/* Scales the image to its largest size without changing its aspect ratio such that both its width and height can fit inside the element.*/ + .initial {background-size: initial;} +/* uses the initially or default size of the background image*/ + .inherit {background-size: inherit;} - /* Percentage, pixel, and viewport units can also be used */ +/* inherits the properties of its parent element*/ + .pixel {background-size: 50px 50px;} +/* specifies the exact height and width of the image*/ + .percentage {background-size: 50% 50%;} +/* changes the width and height based on the percentage specified*/ + .view {background-size: 50vw 50vh;} ``` + Note: If using pixel or percentage for length and you only specify one value, the second one will be set to auto by default.