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?
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
background-size: 50%; doesn't resize the background image by 50%, but instead sets it to 50% of the width of the container. The height is then calculated as needed to hold the aspect ratio.background-size: 50%, the background image will be resized (not cropped) to 100 x auto (auto holding the aspect ratio), regardless of what the original image dimensions were.