How to Position Background Images With CSS

How to Position Background Images With CSS

Coding

Use background-position to adjust the image?s position

Image for post

I?d like to share with you how to position a background image (rather than leave its position to the browser where it will crop the image in the direction from the right, and from the bottom by default).

For this piece, I?m using a landscape picture with a man in the foreground as the focal point. The image is added as background-image, with the CSS property of background-size: cover. It will thus be re-sized to cover the entire container.

Depending on the size of the container, the image will be stretched or cropped.

I will be using the photo below to show how to position a background image on a webpage. The intention is for the image to cover the entire webpage, be it on mobile or desktop.

Image for postPhoto by Rmi Jacquaint on Unsplash

The Image on Different Screen Sizes (As Seen in Chrome Developer Tools)

The image above looks great on a large laptop. It looks slightly stretched when I compare the original image with how it is rendered in a browser (as below).

Image for post

On a small laptop, although the image is cropped from the right, the man in the picture is still visible. However, on a mobile, he?s completely cropped out ? not what was envisioned by the designer.

Image for postImage on a small laptop versus the same image on a large mobile

How can I position the image so the man in the picture remains the focus?

Approach

A quick fix would be to crop the images using an image editor and then display the right image based on screen size.

The other way would be to use CSS ? that?s what I?m using here.

Some background on the use of position

Position tells the browser how to place an image within a container, relative to the edges of its container.

Values for position can be expressed as keywords (top, bottom, left, right, center), percentage or length.

The default background-position is top left or 0% 0%.

  • If only one value is specified, depending on the value, I can specify either the horizontal position or vertical position. The other position is then set to center.
  • If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position.
  • If three or four values are used, the length-percentage values will serve as offsets for the preceding keyword value(s).

Setup

I add my image file by using background-image property on a <div> element.

Looking at the HTML code, the container of the <div> (which is my image file) is <body>.

Image for postImage for post

Changing the Image?s Position

Using keywords for <position> value

To change the positioning of an image, I add the background-position property and add center, top, bottom, left and right as values. Below are screenshots of how the image?s position changes when different values are applied:

Image for post

In this case, where my image is displayed in its full height (or close to it), centering the image along the Y-axis has no effect. Hence, when I use background-position: center, background-position: top, and background-position: bottom, I am effectively using background-position: center center.

left

  • X-Axis: Image is set against the left edge of the container and cropping starts from the right.
  • Y-axis: Image is centered.

right

  • X-axis: Image is set against the right edge of the container and cropping starts from the right.
  • Y-axis: Image is centered.

top

  • X-axis: Image is centered.
  • Y-axis: Image is set against the top edge of the container and cropping starts from the bottom.

bottom

  • X-axis: Image is centered.
  • Y-axis: Image is set against the bottom edge of the container and cropping starts from the top.

center

  • X-axis: Image is centered.
  • Y-axis: Image is centered.

Using non-keywords for <position> value

Besides using keywords like center, top, bottom, left and right as values, I can use percentage or other CSS units for finer adjustments.

Among the screenshots of the image where different percentages from 50% to 100% are applied. 80% looks about right for my purposes.

Image for post

Media Query

CSS Media Query is used to display the image with background-position: 80% on mobile, while keeping its default position on desktop

To decide the breakpoint to use for a media query, I start by entering any value, like max-width: 800px, just to see how it looks on different screen sizes using the browser?s Developer Tools. I then adjust the value of the breakpoint until the image looks good for all screen sizes. After trying out some values, max-width: 1000px looks great for this image, so that?s the finalised value for my breakpoint.

Image for postImage for postFinal product?.

That?s all I have for now.

If you need more flexibility to position your images, there are three and four <position> values that you can use for your background-position property.

1

No Responses

Write a response