Photo too large on mobile device

Support
#1

I’m new to this, but I’m using Pro and I have a background picture on my homepage. The background picture looks fine when the website is viewed with a desktop, but it too large when viewed on a phone (so only a small portion of the picture is seen and is magnified). How can I get my background picture to scale down so the whole picture is seen regardless of the screen size?

#3

Hello There,

We’re glad to hear from you again. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

In Cornerstone, we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

In your case, the background image needs to be resize with custom css in smaller screens. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you in advance.

#4

The URL is http://ahelpinghandcounselingservices.com/ , and it is the picture of the girl sitting in grass. Thank you!

#5

Hello There,

Your image is 5760 x 3840 pixels. This is way to big and has a bigger file size. Please reduce this image to at least 1900x1200 so that you will have a smaller image file size.

And to make sure that you background image is always at the bottom and centered, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
  div#x-section-1 {
    background-position: bottom center;
  }
}

Hope this helps. Kindly let us know.

#6

It worked, thanks so much!

#7

You’re welcome.

#8

Not sure if you prefer new topics or adding to old threads that are similar. Don’t mean to annoy. I have a similar issue. I think the responsiveness is normal and acceptable but my client is asking to see more of the main page full width background photos (family photo at top and family on beach) on mobile like they do on desktop. Not sure it’s possible to do and keep enough behind the buttons and the angled transitions between sections?

Thought or help?

Thanks,
~Jim

#9

Hello Jim,

Thanks for asking. :slight_smile:

This is quite old ticket and even though the question is similar and to avoid any confusion, it’s my humble request to you to create a new ticket and share the relevant details. Posting on a ticket created by a different customer create lot of confusion which slows down the response time. Please create a new ticket and one of Themeco support staff will take a look and assist you accordingly.

Thanks for understanding.

1 Like