Background images are not showing complete

Support
#1

Hi there,

We are using background images on the first section of each of our pages, and we would like to know why the images are not showing as complete on the website as the original ones. The same happens on mobile devices.

Attached you can see a sample of the original image and the image on the website. This problem occurs on all pages. Original image measurement: 2560 x 1080 px. Should we change the dimensions?

Can you help us find a solution so that the background images of the first section of each page are always complete, also the titles?

** In private I share our link with you.

Thank you very much for your help.

#2

Hi There,

That is because of the Section not having enough height. I see that you’re adding a height:50vh on your section. Please adjust that to height: calc(100vh - 90px); that means the height of the fullscreen minus the height of the header/navbar.

CSS calc() Function

Hope that helps,
Cheers!

#3

Hi @friech,

Many thanks for your reply. It works.

If possible, can you let us know what measurement should we give to the images to have the same height as the current section since the height of the original image is very high?

Your help is very appreciated!

Thanks!

#4

Hi There,

In this case, you should change the height of section to 540px instead:

Hope it helps :slight_smile:

#5

Many thanks for your reply, @thai.

One more thing, when resizing the screen or when opening the site on a mobile device, the background images are cropped, also the text. Is there any way to make both responsive?

We appreciate your support a lot!

Thanks!

#6

Hi Charles,

Yes, there’s a way to make it responsive.
For the text, please see this thread for detailed guide:

For the background image, see this thread:

Hope this helps.

#7

Hi @Lely,

Many thanks for your reply.

We have followed the instructions in regards to “Responsive Text” and it works. But, for some reason, we have tried to follow the advice for the Background images, and we have no results so far.

Is there any other way to make the background images responsive?

In case you want to have a look at the site, I share with you the URL in private.

Thank you very much for your time and support.

#8

Hi There,

That is a thing about the background-size: cover, it is responsive in a different way, it will try to cover its entire container (section) no matter how big and tall it becomes, the reality is your site will be viewed on different screen sizes, so even if you resize the image to be fixed on your end, it will still resize on others screen.

What we can do is to adjust the background-position of your bg-image, by default background-position is set to center center so when the bg-image resize it will crop the sides saving the center part. On desktop view, background-position does not really have a noticeable effect because on desktop view the entire image is visible, but on mobile view background-position is very critical because this what defines what part of your bg-image to be the focus on.

We can do also the background-size: 100% 100%; this will ensure that your bg-image will show its entirety regardless of the screen-size, however, this will your image squeeze and/or stretch



Play with the background-size and background-position option until you get the desired look on desktop and mobile.



Hope it helps,
Cheers!

#9

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