Hi there! I’d like to position the image to a particular spot (by using pixels, rather than merely right/left/center) to get the image to where I want it on the crop. Is there a way to do this when the background size is set to “cover”? I couldn’t find a way using CSS…
[image]
Thanks!
Hi @jackmielke,
Thanks for contacting us through the builder.io forum.
You can certainly position an image to a particular spot using CSS pixel values, just need to use CSS Background Positioning properties.
In the builder.io we have an option for CSS properties where you can set background-position: fixed; position: absolute; and then use top/bottom and left/right pixel values to place an image to your desired location.
For your reference, I’ve also attached the screenshot.
Let us know if you still have any concerns or questions. Thank you!
I think I unfortunately did a bad job of explaining… My goal is to have the image effectively “cropped” to a certain position, so that only the desired part of the full image is shown. Right now, I have the background size on the image set to “cover” and my only two decent options for positioning is left and center, which both miss the mark (seen below).
My goal is to precisely position it by pixel to look like this last one, with all the content in the center:
Hope this makes more sense - and thanks again for the help:)
Hi @jackmielke,
There are different ways to crop an image using CSS properties
- The
<img>tag withobject-fitandobject-position - The
background-imageproperty withbackground-sizeandbackground-position - Image or background image with persistent ratio
- Round cropping using
border-radius - Complex paths of cropping with
clip-path
You can know more about them at How to crop an image in CSS.
In Builder.io you can CSS properties to achieve this or you can even write custom CSS code if needed
Let us know if you still have any concerns or questions. Thank you!
1 Like