Hello guys, first off, thanks for all of your support.
On my home screen the full image does not display fully in the first section. Parts of the image on the bottom are left out. I’ve tried using background-size: cover on the section but it doesn’t budge. What do I do?
Hey,
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.
Hi John, I put it in a secure note.
Hi There,
It looks good on my end.
The image is a background image so just the center of the image is shown on more narrow devices.
Please provide a screenshot of what you are referring to in order to clarify.
Thanks
Hi Joao,
maybe I should’ve clarified better. This is the full image: https://imgur.com/a/fXNWl. As you can see, the hero image on the website I listed is not fully visible. I’ve tried using background-size: cover on the section as well with no success.
Hi There,
That is actually the default behavior of a background-image, and ironically its the background-size: cover; that does that. 
It does expand the image proportionally to cover the entire section, resulting that some parts of the image is getting cutoff.
There is really no fool-proof of resolving this issue as the section’s width/height is relative to the viewers screen-sizes (something that we don’t have control with).
You can try background-size: 100% 100%; but that is going to stretch and/or squeeze your background-image depending on the viewers screen.
Hope this shed some lights,
Cheers!
I applied that code to the specific section, but nothing worked. Is there really no possible way to have the picture be fully visible through X theme?
Can’t I specify it using background size: 500px 700x, or whatever the appropriate length is? I’ve tried this and it doesn’t even have an effect on the background image.
Hi There,
Due to proportions that could not be possible without distorting your image.
While on a desktop or laptop devices, the screen has a landscape of mobile devices are portrait.
So the best would be to create a second image to use as a background which will be portrait oriented, duplicate your first section, hide the one that has a landscape background on portrait tablet and mobile, and on the new section hide for laptop, desktop, and landscape tablet.
Hope that makes sense.