Background Photo Size Auto Adjusting (Smaller Devices)

Hi there, I was using a photo as a background and it did not adjust to the mobile version, or just smaller versions, it stays the same size and the images disappear. It did on one page, but not the others. Can I have help? So. Aliveandshine.center there is a picture of two peach lotus’s with new student and so forth on it, it does not adjust. However that same picture adjusts in size for aliveandshine.center/classes. But that’s the only page where that image adjusts, all the other pages that same image does not adjust or show up on mobile or smaller devices. It just becomes white. What should I do?

Side note, I also am having an issue with the top bar logo not showing up. If you can see why that is, that’d be great.

Hi Zenia,

I see what you mean. I think your approach is not an effective one as you have a big image with those lotus images at the top left and bottom right. It will not work as the browser tries to accommodate the image within the container. So you see the issue here? For small devices, you want to force a 2000+ pixel image to cover both ways for a container of for example 600 pixel. That is not possible as you want to push both edges of the image shown. It doesn’t matter if you use Pro Editor or any page builder your approach will not work, and it is not related to the builder itself.

The reason classes page works are that the content height is small. If you add more content there and the height enlarges, then you will see the same problem.

Here is my suggested approach:

  • Separate the backgrounds, have an image with a lotus at the top left and another image with the lotus at the bottom right.
  • Then, go to the section settings that you added by clicking the magnifying glass:
  • In the section settings add the top left image to the lower background and set it to be positioned at the top left and make it contain the image in the container.
  • Add the bottom right one in the top background layer and set it to be bottom left and contain in the container:

That should do it :slight_smile:.

Regarding the second question:

I am not sure if you are familiar with the Header Builder of the Pro theme, but you use that builder, and there is no image added to the builder to show in the first place. I suggest that you read more about the header builder here:

To add the logo, I suggest that you use the Image Element in the header builder.

Finally, I suggest that we keep different questions in separate threads, that will help us focus on each case, and it will help other customers to be able to focus on the issue if they have a similar question:).

Thank you.

How come it works for aliveandshine.center/classes (the image adjusts with the lotus for smaller devices and becomes smaller) yet it doesn’t work that way everywhere else. I don’t think you read that part. That it works for that part but not all of the site. Why is that part different/unique?

Hi @Zinkles,

Because the sections have different heights. If you inscrease the height(padding) of section on classes page, it wouldn’t work:

So I recommend you to try with the solution of @christopher.amirian mentioned in the previous reply.

Hope it helps :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.