Background Size Property in CSS
Background Size Property
The background-size property adds new functionality to CSS that allows specifying the size of the background images, using either lengths or percentages.
Syntax:-
Its syntax is:-
< style >
element{
background-size: auto| length| cover| contain| initial| inherit;
}
< /style >
Further Explanation:-
| Value | Description |
|---|---|
| auto | The background image is displayed in its original size |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges |
| contain | Resize the background image to make sure the image is fully visible |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Code Explanation
All Tutorials related to CSS3
CSS3 Intro
Vendor Prefixes
Border Radius Property
Box Shadow Property
Transparency
Text Shadow
Pseudo Classes
Pseudo Elements
Word Wrap
@Font-Face
Linear Gradients
Radial Gradient
Background Size
Background Clip
Opacity
Transitions
Transform Rotate
Translate Skew
Scale and Multiple
Animations
Animation Properties
3D Transform
CSS Filters 1
CSS Filters 2
CSS Filter 3
