How can I make it so that my background photo on home-screen doesn’t get extremely zoomed -in when viewing on a mobile ?

Hello Nathaniel,

Thanks for submitting a question about background images. There are options in the Customizer that can prevent this. Which options have you tried so far?

Best,

Christopher M.

Hello Ron,

I believe that the confusion lies in where you go to look at the background image.  You will need to go to the Page Editor (using the Classic Editor) and then use the controls in the menu to select the different sizes.  You can then go to the graphic and edit the size per the screen type (there’s a desktop, tablet, and phone view).  If you continue to have problems with the issue, please try making changes there first.

Hi Ron.

I believe that the menu Arnel was mentioning is described here. However, the Settings for the Background Image only allow you to hide the image on the selected devices. The responsiveness of BoldGrid Inspirations should be automatic.

If you can reply back with the name of the Inspiration and the size/dimensions of the image you are using in your section’s background image, this will help to replicate and diagnose the issue.

Thanks.

Did you crop the image when selecting it as your background image, or did you select the “Skip cropping” option? I tested this in Swifty with an image that matched your dimensions exactly, and I selected to have it cropped. It responds perfectly in mobile view. However, I also tried it with “Skip cropping” selected and it still works. So I was not able to replicate this behavior even though I’ve seen it before.

The image dimensions will have an effect on the resizing behavior. The reason that’s there is to ensure that the image matches the the other elements on the page, which also resize in the mobile view. However, with some images this can have a jarring effect like the one you’re noticing. There are a few things you can try.

• Customizer: in the admin area of your site, (or in the toolbar) click Customize and then Background. This is where you can choose different display options.
• Try different images/sizes
• Consider using a solid color or pattern instead of an image

Well, here is another issue that I just noticed pertaining to this as well. This happens even with the stock picture that came on the Inspiration. Nothing was changed with that picture either. There’s a picture of a skateboard and when in mobile view it shows just the very middle of the board and not all of it. Maybe there is something wrong with our version of it? 

OK, so first I want to apologize for being dumb and not realizing my mistake and making it clear. This isn’t for the background of the site itself. This is for the background on a section/row. I am so sorry for making you guys do all this work only to realize I was giving you wrong info. So, a background to a row is not sizing correctly when on mobile. 

legionoftheleprechaun.com

That is the page.  The main image below the header and right above the coming soon message. We’re having the same issue on all the pages. It’s just a background for the section. 

Thanks Ron!  The problem is that the image you’re using has all of it mainly elements focused on the right side of the image. The responsive coding for this image automatically resizes the image without regard to the placement of image content.  The easiest way to handle this is to change the image so that the content will be positioned to account for the change in size.  Otherwise, it will require custom coding in the CSS to use a different image when the size of the screen changes down to the phone size.  You can also see an example why this is a tricky issue to resolve by looking at the answer to this question. The problem is that the required code will often be unique to the image. You may need to speak with an experienced web developer to help with the code if you intend to keep the same image.  This is a common responsive design issue and is often resolved by an image change because of the custom coding requirements to accommodate specific image placements.

Apologies again for the frustration.  Please let us know if you have any further questions.

Hi Ron,

I hope I can try to explain this so that it’s a bit clearer. This is a very common responsive design issue.  There are three sizes that the theme responds too (based on bootstrap code and the standard they used for all of these themes). Basically, the 3 sizes can be considered the desktop, tablet and phone size.  Each time screen reaches the smaller threshold, the media uses an automatically generated size of the image.  When it reduces the size of the image, it is set to keep the scale of the image the same so that image is not warped.  In layman’s terms, if you have a picture of people, the image of the people doesn’t squash them smaller or make them skinnier.  I’ll give you an example of what happens in a screenshots below with the default background to the Swifty theme.  So let’s look at the three sizes and see what happens to the image, text and menus on the screen.

Desktop:

So in the Desktop,you have the image in its full size – the menu is showing, but there’s no issue affecting the image other than possible width of the section that I didn’t adjust in the BoldGrid editor.

Tablet:

In the Tablet size the image width is reduced.  This affected the title so that text is in the middle of the screen.  The menu is only 3 items, so it is centered with no issue.  As you noticed in your image, there is still little effect to the elements of the image because they still show the majority of the image while retaining the appropriate size of the image.

Phone:

So, here you can see the most dramatic effect of the responsive code on the image in the phone size.  The menu has changed to a hamburger menu – which will show the menu items when you hover over/touch that button.  The text in the menu (the call to action) has been set to 4 lines and is now centered over the graphic.  The graphic however is no longer recognizable because it has been cropped and centered automatically.  The code cannot sense where the elements in the image are located and therefore cannot properly size the image so that it remains visible for the phone size. 

This is a common design problem because the intent of responsive design is to deliver ONE design solution that will automatically resize to the media being used to hold the image (media = screen).  So, the programmatic solution will be to change the code so that it accommodates the image.  The image would need to be manipulated by the code when it reaches the phone size so that you properly see what the designer wants you to see.  This is typically custom coding because the image will always be different depending on the website being created and/or it depends on what the site owner wants to appear in this state.

The image ratio is kept constant in order to keep the image scaled as per its original size. If the image were to be changed without regard to the ratio, then it would become warped.  For example:

I didn’t take this all the way down to phone size, but you can see what’s happening.  The image can be warped to the point that will be unrecognizable. 

The code that I provided in the link above (the question and answer from Tim E.) has code that you are welcome to try to use for your image. You can also change the image so that whatever appears at the phone size will be appropriate to the site.  

Changes to the existing code are considered custom code which is outside of the scope of support. This is because a change for one site may not apply to another resulting in unending variations based on custom images.  Changing the image would probably be easiest.  An experienced Web developer can also help to change code so that the image properly appears based on the phone size.  This can be done using Custom CSS code.

I sincerely hope this helps to explain the issue.  I do apologize again that we can’t provide a more direct answer. I hope the solutions I’ve offered can help you resolve the issue.  If you have any further questions or comments, please let us know.

Kindest regards,

Arnel C.

• This reply was modified 1 year, 5 months ago by BoldGrid Support.
• This reply was modified 1 year, 5 months ago by BoldGrid Support.

That code targets the CSS selectors and not the images themselves, so that code would be applicable for potentially any image.

No worries, Ron. Thanks for your patience!