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:
```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.