CSS full cover background image but only horizontal or vertical fix

Sometimes it is necessary to have an image fill the page, or background of its container but also to stretch only one direction.

For example you may have an image that you want to full / stretch horizontally but keep the same height vertically at all times. Or, vice verse

You can achieve this using: background-size: 100% 50%;

the two options control the sizes of the horizontal and vertical and can be any combination of % or px

eg: background-size: 100% 840px;
eg: background-size: 75px 100%;

Print Friendly, PDF & Email

More Like This


CSS Tips
  • Post a comment