How To Change The Position Of A Background Image In Css

Coding

How to Position Groundwork Images With CSS

Use background-position to adjust the image's position

I'd like to share with y'all how to position a background image (rather than get out its position to the browser where it volition ingather the image in the direction from the correct, and from the bottom past default).

For this slice, I'k using a landscape movie with a man in the foreground every bit the focal point. The image is added equally background-image , with the CSS property of background-size: cover . Information technology will thus be re-sized to encompass the entire container.

Depending on the size of the container, the paradigm will exist stretched or cropped.

I will be using the photo below to testify how to position a background image on a webpage. The intention is for the paradigm to embrace the unabridged webpage, be it on mobile or desktop.

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

The epitome higher up 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 minor laptop, although the prototype is cropped from the correct, the man in the moving-picture show is all the same visible. However, on a mobile, he'due south 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 human in the picture remains the focus?

Arroyo

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

The other mode would be to utilize CSS — that's what I'm using hither.

Some background on the use of position

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

Values for position tin be expressed as keywords (summit, lesser, 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 tin specify either the horizontal position or vertical position. The other position is then set to centre.
If two non-keyword values are used, the kickoff value represents the horizontal position and the second represents the vertical position.
If three or four values are used, the length-percent values will serve as offsets for the preceding keyword value(s).

Setup

I add together my image file by using groundwork-image belongings on a <div> element.

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

Changing the Epitome'southward Position

Using keywords for <position> value

To alter the positioning of an prototype, I add together the groundwork-position property and add center, top, bottom, left and right as values. Beneath are screenshots of how the image's position changes when different values are applied:

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

left

Ten-Centrality: Prototype is set against the left border of the container and cropping starts from the correct.
Y-axis: Image is centered.

right

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

top

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

lesser

X-axis: Prototype is centered.
Y-axis: Prototype is set against the bottom edge of the container and cropping starts from the meridian.

center

Ten-axis: Epitome is centered.
Y-centrality: Epitome is centered.

Using non-keywords for <position> value

Likewise using keywords like center, top, bottom, left and right equally values, I tin can use percent or other CSS units for finer adjustments.

Among the screenshots of the image where different percentages from 50% to 100% are applied. 80% looks most 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 determine 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 and so 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, and so that's the finalised value for my breakpoint.

That'southward all I have for now.

If you need more flexibility to position your images, there are three and 4 <position> values that you tin employ for your background-position property.