Coding
Use background-position to adjust the image?s position
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.
Photo 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).
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 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>.
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:
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.
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.
Final 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.
