[Resolved] Cover Image Issue

[Johann]

Hi team !

I have created a container in which I have added an image. I want to use that image as a cover. Everything is set on this way.

I can’t really explain why but I am not able to get the result I am looking for…meaning seeing the full image with text…

As it is not the first time I am struggling with that kind of problem, I am asking for your support.

In appendice, you have the original image ratio I’d like to find on the site preview ^^

Thanks in advance.
Johann

https://ibb.co/9nJ0KfD (original image)
https://ibb.co/gtDBLDM (image in wp back office)
https://ibb.co/RjRLfzD (image in site preview)

[Ying]

Hi Johann,

1. It seems you are using merge function from a header element which can be found at appearance > elements.
The merge function merges your header with the site content, so the top part of the container is covered by the header.
If you don’t want the merge function on this page, you can exclude this page from the header element’s location.

2. I don’t think the image’s aspect ratio has changed, if you want to show the full image, change the image size to containinstead of cover.

Let me know if this helps!

[Johann]

Hi Ying

I deleted the merge function and I used the contain format instead of cover and…I’m now close from the goal 😉

As you can see on pictures, I am using a black background to allow opacity with the pic but there is now a black surrounding around the picture…thing that I don’t want.

What is your recommendation ?

Thanks a lot

https://ibb.co/PgKLWRL (preview)
https://ibb.co/7W1htyF (WP)

[Ying]

That’s tricky, as the background color is applied to the container, in that case you’ll need to adjust the top/bottom padding of the container so that the container can have the same aspect ration as the image. (It will only work when there’s no content but only the background image in the container)

For example, your image width is 1000px, height is 600px, let’s do a little math here: 600/1000=0.6=60%.

So you can set the container block’s top padding to 60%, leave other paddings blank.

Set the background image size to contain.

Let me know if that works 🙂

[Johann]

Hi again,

I did what you mention but the problem is still there…

Image width = 1000px
Image Height = 514px
Ratio = 52%
BG Image set to CONTAIN

Anything else would be appreciated ^^

Thanks for your support !

https://ibb.co/YPJsjty

[David]

Hi there,

can you share a link to the page where i can see the issue ?

[Johann]

Hi David,

It does concern the main page.

Please feel free to access it with the temporary credentials I’ve provided 🙂

[Ying]

Your image size is 1400px by 518p，so the ratio is37%not 52%:
https://www.screencast.com/t/B6cY59hmsZtf

[Johann]

That works !

Thank you guys 🙂

[Ying]

No problem 🙂

[Author]

Posts