background-size | css background cover
Thebackground-sizepropertyinCSSisoneofthemostuseful—andmostcomplex—ofthebackgroundproperties.Therearemanyvariationsanddifferentsyntaxesyoucanuseforthisproperty,allofwhichhavedifferentusecases.Here’sabasicexample:html{background:url(greatimage.jpg);background-size:300px100px;}That’sanexampleofthetwo-valuesyntaxforbackgroundsize.Therearefourdifferentsyntaxesyoucanusewiththisproperty:thekeywordsyntax,theone-valuesyntax,thetwo-valuesyntax,andthemultiplebackgroundsyntax.KeywordsInadditiontothedef...
The background-size property in CSS is one of the most useful — and most complex — of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases. Here’s a basic example:
html { background: url(greatimage.jpg); background-size: 300px 100px; }That’s an example of the two-value syntax for background size. There are four different syntaxes you can use with this property: the keyword syntax, the one-value syntax, the two-value syntax, and the multiple background syntax.
KeywordsIn addition to the default value (auto), there are two keywords you can use with background-size: cover and contain
The differencecover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. contain, on the other hand, says to always show the whole image, even if that leaves a litt...