CODEWITHSUNDEEP
htmlcss
Anindya Basu
Anindya Basu

Reputation: 659

CSS Background-size one parameter

I'm trying to get a better grasp on HTML/CSS and very often I see things like background-size: 100px

what does it mean when there is only one parameter given for something that requires a length and width? Does it default to only defining the length and scaling the width according to the image? Or does it default to the width?

Upvotes: 3

Views: 303

Answers (1)

Etheryte
Etheryte

Reputation: 25310

If only one size is defined it's handled as width and the height automatically set to auto.

From the Mozilla Developer Network:

/* Keywords syntax */
background-size: cover
background-size: contain

/* One-value syntax: the value defines the width of the image, the height is implicitly set to 'auto' */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* Two-value syntax: the first value defines the width of the image, the second its height */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* Values for the multiple backgrounds, defined by background-image, may be listed separated by commas */
background-size: auto, auto     /* Do not confuse this with background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit

Upvotes: 3

Related Questions