Atributo background-size CSS
- Página anterior background-repeat
- Página siguiente block-size
Definition and Usage
background-size
The attribute specifies the size of the background image.
See Also:
CSS Tutorial:Fondo de CSS,CSS Background (Advanced)
HTML DOM Reference Manual:backgroundSize Property
Example
Specify the size of the background image:
div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; }
CSS Syntax
background-size: length|percentage|cover|contain;
Attribute Value
Value | Description | Test |
---|---|---|
length |
Set the height and width of the background image. The first value sets the width, and the second value sets the height. If only one value is set, the second value will be set to "auto". |
Test |
percentage |
Set the width and height of the background image in percentages of the parent element. The first value sets the width, and the second value sets the height. If only one value is set, the second value will be set to "auto". |
Test |
cover |
Extend the background image to be large enough to completely cover the background area. Some parts of the background image may not be displayed in the background positioning area. |
Test |
contain | Extend the image to the maximum size to make its width and height completely fit the content area. | Test |
Technical Details
Default Value: | auto |
---|---|
Inheritance: | no |
Version: | CSS3 |
JavaScript Syntax: | object.style.backgroundSize="60px 80px" |
More Examples
- Stretch the background image
- Stretch the background image to completely cover the content area.
- Stretch the background image to horizontally copy the background image four times
- Stretch the background image to make the background image horizontally copied exactly four times.
Browser Support
The numbers in the table indicate the first browser version that fully supports this property.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | IE / Edge | Firefox | Safari | Opera |
4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
- Página anterior background-repeat
- Página siguiente block-size