Background image placement based on horizontal anchor point

[EdFromBJCS]

I’m trying to figure out if there is a way to create an anchor point along the horizontal axis of a background image and position the background such that the anchor point is always center-aligned on narrower viewports. In the case of the example below, that anchor point is about 30% from the left edge of the image.

Here’s the codepen where I’m trying to work this out: https://codepen.io/BJCS-Ed/pen/dzerxB

I’ve tried messing with the background-position property, but I haven’t been able to keep the focal point consistently in the center at different mobile sizes.

Any advice? I would prefer a pure CSS solution if possible.

[Beverleyh]

Not sure if this will help but it presents a few different image resize options http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img-cfp.htm

There’s an article linked from the top corner of the demo.

[EdFromBJCS]

Thanks for responding.

Not quite what I’m looking for. I can set the background-position similar to how the author does and it will keep the focal point in the frame, but it doesn’t keep it centered.

[Beverleyh]

What about changing the property values indicated in the demo here (to focus on the middle instead of the top right portion) https://css-tricks.com/forums/topic/define-art-direction-that-can-be-scaled-responsive-image-just-one-image/#post-242659

Note that in the CodePen, I originally used an https:// protocol for the monsters wallpaper image. Don’t know why I did that but it’s incorrect – should be http://. Change it to see the pic while you fiddle.

[EdFromBJCS]

Ah, thank you. It looks like the trick was to change the background-size from contain to a percentage on mobile sizes, then I was able to tweak the background-position property until I got it where I wanted. In the CodePen, I set it to background-size: 200% and background-position: 10% top; I eyeballed it, so I don’t know how the math works, unfortunately.

[Author]

Posts