My section background pic is not responding to my monitor size

Support
#1

I’ve spent hours and hours trying to figure this out. I’ve changed page template as blank-no container| header footer.
I’ve got a background image in section1 and it’s 3840x1600. I’ve given it class name section1. I can control the size in style and in css but only if i use absolute dimensions for both width and height, or sometimes if i use absolute height, and set width to auto. But if I set width and height to auto, the width seems to be correct, but height is way too short. What do I do?

#2

Hello There,

Thanks for writing in! To resolve your issue, please remove first all your custom css and edit the page back in Cornerstone. In the row settings, you will have to enable the “Marginless Column” option. In your column settings, please find the style field and insert min-height: 450px; vertical-align: middle;. This should set the minimum height of your column to a decent amount of space to display the contents inside which will be aligned vertically.

And if nothing seems working, please provide the url and access so that we can take a closer look at your page.

Please let us now how it goes.

#3

Thanks for the speedy response. However, although the image spans a little differently, its width still does not respond to the width of different monitors on explorer or chrome, and it cuts the top and bottom off in both browsers as well.
url: hunterprograms.com

Thank you in advance.

Ray

#4

Hi @RayHunter,

Thanks for writing in.

Add this CSS in your section background style box:

background-size:contain;

The background will adjust according to the background size.

Hope it helps.

Thanks.

#5

Thanks for the help!! I did it, but …

On my desktop the entire picture shows, but the picture doesn’t span the entire wide screen monitor I have, 3440x1440. I tried both explorer and chrome.

But then I tried my laptop with display 3840x2160 with both chrome and explorer, and the entire picture shows and correctly spans the width of the screen.

Also, I have all my text centered and contained 1024. It’s moving up and down, depending on the browser and computer. What’s the best way to control this?

#6

Hi There,

Thanks for writing in! 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. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#7

Thanks!!!

#8

Hi There,

If you have not notice, your site is displaying a different layout/theme on mobile. I believe that is a feature of JetPack, please deactivate that feature or the Jetpack completely. Then clear and deactivate your caching plugin as the site is still on development stage. Sometimes caching plugins does not show you the changes immediately causing for a confusion.

Now to your background image issue, keep in mind that background-image is responsive in a different way please see this link on how background-image works. The default behavior of background-image is the cover, the image will try to cover the entire section/container by expanding itself resulting some parts of it may not be visible within the container. You can force the background-image to always fit to its container by using the background-size:100% 100%; on the section, but that will squeeze and stretch your background-image on some screen-sizes specifically on mobile phones.

I advice you revert back your section to default settings, or create a new section. Add a min-height: calc(100vh - 300px); property to its ROW, this gives your ROW the height of your screen entire fold, minus the height of your header (300px),

Then center align your column and add this on the column STYLE field:

top: 50%;position: absolute;width: 100%;

This should horizontally and vertically center your content responsively.

Please let us know if something is not clear, especially on how the background-image works.

Cheers!

#9

Thanks for the help. I turned off caches. I think the full width background images being responsive is working. But the text laying on top of those background images moves around. However, for the background images that are 1024 wide, the text laying on top seems fine on all browsers and computers. What do I do?

#10

Hi There

Are you referring to your first section with a grey background? If yes,

Instead of adding top: 32%; to your column, please use

margin-top: 20%;  padding: 5%;

If that does not help, please provide a screenshot to clarify.

Thank you