Background Image Not Showing Up in Mobile

[BKosarek]

I an trying to figure out how to keep the background image on the mobile format. When I view this on the desktop format, I can see myself sitting on the stairs. When I view it on the mobile format, it’s just a white background or blocked. I’ve watched the videos on how to adjust for different sizes/formats, but I’m still not able to figure it out. Any insight on how to keep it reactive with the size would be greatly appreciated. Thanks!

Your Dream Life Unlocked Plan™

UPDATE: I did what you suggested and it did not work. On the mobile version, it is still just a white background where the image should be for the landing page above. See attached. What would you suggest next?

[lely]

Hi There,

This is because of how it is setup. You have added the background lower part image on section. On desktop view, you have 2 side by side column. Since left column doesn’t have content, it goes background image set on the section is visible. By default background is set to position itself on center. On mobile, this image will adjust proportionately. Since on mobile, the content is longer, this image will then be behind the content on your second column. To fixed the issue, we have 2 option:

First option: Recommended and will give you total control:

1. Add the image as background of ROW instead of SECTION.
2. Set this current ROW, to be visible on LARGE SCREEN only. Go to Customize tab> check HIDE BASED ON SCREEN OPTION.
   3.) Add another ROW. Set this ROW to be visible on SMALL SCREEN only. Instead of using the image as background, add it instead ad IMAGE element. Then add the text element as usual.

Second option: From your current setup, we need some CSS custom fixed.

.e1315-12.x-column.x-sm.x-1-2 {
    min-height: 50px;
}
.e1315-10.x-section .x-bg-layer-lower-image { /*Position the bg image on top of the section on the white part*/
    background-position: top center !important;
}

If you are not familiar with CSS, I do recommend option 1. See this: https://screencast-o-matic.com/watch/cFetQCDBvD

Hope this helps.

[BKosarek]

Hi Lely - Thank you, this is helpful. I’m not 100% certain how to do what you want. To be honest, I’m trying to launch this landing page and I’m struggling to get it out. Is it possible to get someone to assist me with making these changes for how I want it to look? It doesn’t seem hard, but I am not able to get it exactly how I want. Please let me know if this is an option and how I would go about doing so.

Thank you,
Bryan

[friech]

Hi Bryan,

Ok let’s do this step by step, first of all, please remove this section right here this is an empty section, this will only put an unnecessary white space to your page (unless you are planning to put something in there).

Now on your banner section, please remove the negative margin and huge padding to that section, set it to 0. That is part of the reason why that section looks mess up on the mobile view. Apply the top and bottom padding to the ROW instead.

Now, let’s go to your section background-image, set your background-size to cover; that is because you need your background to cover your section all the time. That is the reason why we are seeing white space on the section, because your background-image did not cover it, and it only cover the center part of the section.

Another thing with the background-image is the position, by default background-position is set to center of the image (x and y axis). Most of the time this option gets overlook because the bg-image fits in desktop view, however, in mobile portrait view the image always gets cropped (imagine you’re trying to fit a landscape picture to a portrait frame), since the person on the image is not really in the center, we need to adjust the x-axis positioning so the person won’t get cropped, I think that is about 35% from the left, so your background-position should be 35% 50% that means 35% in x-axis and 50% in y-axis.

Hope that helps,
Cheers!