# Hero image responsiveness **URL:** \ **Category:** Responsiveness\ **Created:** [October 19, 2016, 4:23pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102 "2016-10-19T16:23:06Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 4:23pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/1 "2016-10-19T16:23:06Z")
Hi Helpful folk, I have a full width hero image and I’ve chosen to keep the element proportions when it scales down. ![](https://us1.discourse-cdn.com/bubble/original/2X/6/64704e37611462edcf210a4389add499acd3b2b3.png) 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? ![](https://us1.discourse-cdn.com/bubble/original/2X/d/d9017dc5dea69e2d15bb7707294be7d5b045bd87.png) ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 5:24pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/2 "2016-10-19T17:24:53Z")
To be more clear - a white gap appears below the hero image, grows larger as I make the width narrower. ---
**Author:** ![DiscipleGeek](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/disciplegeek/32/5627_2.png) [@DiscipleGeek](https://forum.bubble.io/u/DiscipleGeek)\ **Post date:** [October 19, 2016, 5:26pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/3 "2016-10-19T17:26:18Z")
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](http://www.w3schools.com/cssref/pr_background-position.asp) ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 5:35pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/4 "2016-10-19T17:35:49Z")
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. ---
**Author:** ![DiscipleGeek](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/disciplegeek/32/5627_2.png) [@DiscipleGeek](https://forum.bubble.io/u/DiscipleGeek)\ **Post date:** [October 19, 2016, 5:38pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/5 "2016-10-19T17:38:19Z")
Huh, my image maintains proportions. Is your “Make image as wide as parent element” checked? ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 5:44pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/6 "2016-10-19T17:44:54Z")
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. ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 5:50pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/7 "2016-10-19T17:50:43Z")
Can you show me what your background image looks like in original and phone view? ---
**Author:** ![DiscipleGeek](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/disciplegeek/32/5627_2.png) [@DiscipleGeek](https://forum.bubble.io/u/DiscipleGeek)\ **Post date:** [October 19, 2016, 5:53pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/8 "2016-10-19T17:53:32Z")
> **[Bubble - Visual Programming](https://vineyard.bubbleapps.io/version-test)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. If i could add background-position: bottom right; it would show the sheep all the time 😕 but i don’t see the option. ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 5:55pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/9 "2016-10-19T17:55:01Z")
Yeah so this is my exact issue - I need to see the whole image, not a cross section. ---
**Author:** ![DiscipleGeek](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/disciplegeek/32/5627_2.png) [@DiscipleGeek](https://forum.bubble.io/u/DiscipleGeek)\ **Post date:** [October 19, 2016, 5:57pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/10 "2016-10-19T17:57:13Z")
well fixed my issue… 😕 added a css style in the page header section… Mind sharing your editor with me so I can see what’s going on? ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 5:58pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/11 "2016-10-19T17:58:47Z")
[https://bubble.io/site/airmodels/version-test/](https://bubble.io/site/airmodels/version-test/) Thanks bud ---
**Author:** ![DiscipleGeek](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/disciplegeek/32/5627_2.png) [@DiscipleGeek](https://forum.bubble.io/u/DiscipleGeek)\ **Post date:** [October 19, 2016, 6:08pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/12 "2016-10-19T18:08:34Z")
i’m not able to replicate the problem now… 😕 > **[Bubble - Visual Programming](https://dg-test.bubbleapps.io/version-test)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 6:12pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/13 "2016-10-19T18:12:32Z")
Hmm, maybe we are cross wires but that image is not shrinking and maintaining landscape proportions. ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 6:13pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/14 "2016-10-19T18:13:50Z")
![](https://us1.discourse-cdn.com/bubble/original/2X/9/9b479b4b79e7626a20242471831727d9829fa1c6.png) Mobile view should look like this - but without the big gap beneath it ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 6:25pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/15 "2016-10-19T18:25:48Z")
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. ---
**Author:** ![DiscipleGeek](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/disciplegeek/32/5627_2.png) [@DiscipleGeek](https://forum.bubble.io/u/DiscipleGeek)\ **Post date:** [October 19, 2016, 6:33pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/16 "2016-10-19T18:33:02Z")
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. ---
**Author:** ![gregoryjohn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gregoryjohn/32/209419_2.png) [@gregoryjohn](https://forum.bubble.io/u/gregoryjohn)\ **Post date:** [October 19, 2016, 6:43pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/17 "2016-10-19T18:43:45Z")
DOH! I’m an idiot. I just needed to group the elements to keep them pinned together. ---
**Author:** ![DiscipleGeek](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/disciplegeek/32/5627_2.png) [@DiscipleGeek](https://forum.bubble.io/u/DiscipleGeek)\ **Post date:** [October 20, 2016, 3:41am UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/18 "2016-10-20T03:41:50Z")
@emmanuel is there a plan to add background-position to element images? ---
**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\ **Post date:** [October 31, 2016, 10:31pm UTC](https://forum.bubble.io/t/hero-image-responsiveness/7102/19 "2016-10-31T22:31:05Z")
This would be helpful for me too.