Background image positioning

Keep in mind that your responders will go through your flows in a variety of viewport sizes, ranging from small phones to large desktops, so it is wise to test image positions on a variety of viewports and to prefer using percentages rather than pixel distances if not using sizing or positioning keywords.

Size

Contain

With contain, the image will always be contained within its element and always be visible, but potentially smaller and not covering the entirety of the element.

Cover

With cover, the image will always cover the entirety of its element. Depending on the relative aspect ratios of the image and element, parts of the image may be cut off.

Absolute

When a background image is absolutely positioned, it will always take precisely that size.

Position

Keywords

Top, Right, Bottom, Left, Center are all valid keywords for background image positions - the image will be placed in the respective position within the element, which can differ between the X and Y axis.

Absolute

If an image position is specified absolutely, the image will always be offset from the top-left by that position. For example, if the absolute position is 25% and 25%, the image will appear a quarter of the way from the left and a quarter way from the top.

Last updated