Forum Academy Marketplace Showcase Pricing Features

Hero image responsiveness

Hi Helpful folk,

I have a full width hero image and I’ve chosen to keep the element proportions when it scales down.

The more I scale down the larger a white gap begins to appear. I can’t figure this one out, anything obvious I’m missing?

1 Like

To be more clear - a white gap appears below the hero image, grows larger as I make the width narrower.

I’m having a similar issue… I’ve set it as a background to the page, which fixes the gap, but i don’t see the options to set background-position other than the “center the image” Wonder why the other position settings aren’t available, e.g.:

http://www.w3schools.com/cssref/pr_background-position.asp

As a background image I lose the ability to keep element proportions. I need it to remain landscape.

It does solve the white space though.

Huh, my image maintains proportions. Is your “Make image as wide as parent element” checked?

Yes it’s checked and the image remains the same massive size and doesn’t scale at all. It means I get a small vertical cross sections in phone view.

Can you show me what your background image looks like in original and phone view?

If i could add background-position: bottom right; it would show the sheep all the time :confused: but i don’t see the option.

Yeah so this is my exact issue - I need to see the whole image, not a cross section.

well fixed my issue… :confused: added a css style in the page header section…

Mind sharing your editor with me so I can see what’s going on?

https://bubble.io/site/airmodels/version-test/

Thanks bud

i’m not able to replicate the problem now… :confused:

Hmm, maybe we are cross wires but that image is not shrinking and maintaining landscape proportions.

Mobile view should look like this - but without the big gap beneath it

I guess I could use conditional rules to display different size background images at different breakpoints.

Not fluid but might help with the white space.

That’s weird, my test resizes for me (until it gets ridiculously small) and has no blank space beneath it. Maybe someone else with more responsive experience in Bubble will come by and answer.

DOH! I’m an idiot.

I just needed to group the elements to keep them pinned together.

2 Likes

@emmanuel is there a plan to add background-position to element images?

2 Likes

This would be helpful for me too.