How to align an image centered and top?

I’m using background images throughout our app. In general, I want the images horizontally centered within the image container (since the images will be larger than the container), and I’d like them vertically either aligned to the top or to the bottom of the container (depends on where the contain is on the page whether the image should be top or bottom aligned).

Is there any way to do this in Bubble? …I’m only seeing the center image option which centers both vertically and horizontally (I belive) and that’s not what I want.

Thanks!

Can you share an example online of the effect you’re looking for?

Here’s an example URL: http://try.careernumbers.com/break/

The background image at the top of this URL is centered, top. I’ve set it up this way in unbounce with an admin option that looks like this:

Some alignment options for background images would be nice. I take it they are referring to background-position CSS with options like:

  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Center Center
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right

Rather than having just a “Center the image” checkbox, replace it with a dropdown with these options.

1 Like

Since were on the topic, you could probably switch out the two background-repeat property checkboxes with a dropdown containing these options:

  • Repeat
  • Repeat Horizontally
  • Repeat Vertically
  • Do Not Repeat

I know that checking both boxes applies the Repeat background-repeat property css, but it would help save some space on the property editor, especially if you add the additional alignment options.

Another dropdown menu for some additional background-size options would be cool too. Giving us options like:

  • Cover
  • Contain
  • Initial

I’m guessing the “Make image as wide as parent element” checkbox is like the Cover option, but I haven’t really used this at all yet.

Just some additional ideas that I thought I would add. :wink:

Good suggestions, we’ll think about it.

1 Like

any updates on this feature?

Also curious on update.

Would Also like to see this @emmanuel

has this background-position function been added to the new responsive engine, or am i just missing something?