gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

give definitions for back-ground size properties (#32899)

Browse Source
This commit is contained in:
azrap
2019-03-14 23:51:35 -07:00
committed by The Coding Aviator
parent 02df1343e1
commit 193bb31133
1 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
guide/english/css/background-size/index.md
View File

@ -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: 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 ```css
/* Background size property values that can be used */ /* Background size property values that can be used: */
.auto {background-size: auto;} .auto {background-size: auto;}
/* auto uses the default size of the background image*/
.cover {background-size: cover;} .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;} .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;} .initial {background-size: initial;}
/* uses the initially or default size of the background image*/
.inherit {background-size: inherit;} .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;} .pixel {background-size: 50px 50px;}
/* specifies the exact height and width of the image*/
.percentage {background-size: 50% 50%;} .percentage {background-size: 50% 50%;}
/* changes the width and height based on the percentage specified*/
.view {background-size: 50vw 50vh;} .view {background-size: 50vw 50vh;}
``` ```
Note: If using pixel or percentage for length and you only specify one value, Note: If using pixel or percentage for length and you only specify one value,
the second one will be set to auto by default. the second one will be set to auto by default.