- This topic is empty.
August 22, 2017 at 1:08 pm #259396
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.August 22, 2017 at 1:35 pm #259397BeverleyhParticipant
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.August 22, 2017 at 2:04 pm #259399
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.August 22, 2017 at 2:41 pm #259409BeverleyhParticipant
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.August 23, 2017 at 7:43 am #259425
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.
- The forum ‘CSS’ is closed to new topics and replies.