CSS background | css background cover
ExampleSpecifythesizeofabackground-imagewith"auto"andinpixels:#example1{ background:url(mountain.jpg); background-repeat:no-repeat; background-size:auto;}#example2{ background:url(mountain.jpg); background-repeat:no-repeat; background-size:300px100px;}TryitYourself»[1]More"TryitYourself"examplesbelow.DefinitionandUsageThebackground-sizepropertyspecifiesthesizeofthebackgroundimages.Therearefourdifferentsyntaxesyoucanusewiththisproperty:thekeywordsyntax("auto","cover"and"contain"),theone-value...
ExampleSpecify the size of a background-image with "auto" and in pixels:
#example1 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: auto; }#example2 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: 300px 100px;}
Try it Yourself »[1]More "Try it Yourself" examples below.
Definition and UsageThe background-size property specifies the size of the background images.
There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).
Show demo ❯[2]
Browser SupportThe numbers in the table specify the first browser version that fully supports the property.
Numbers followe...