Help with featured webinar image

[ChristineGBaker]

Original image

Hi there, 

I am having an issue with our featured webinar image. I have attached the original image as well as a screenshot of what it currently looks like on our website. We have used the same size image on every webinar so I am unsure as to why we are having this issue. Thank you 

Current image on website

[ChristineGBaker]

https://app.hubspot.com/hubdb/6306975/table/2625269

Here is the link to the table 

[Chris-M · Accepted solution]

Hello @ChristineGBaker,

as i can see you are using "CSS background images". The issue here is, that the image is having another aspect ratio than the box. 

You are trying to put an image with a ratio of: 640x360px into a box with the ratio of: 704x459px.

What is going to happen, the image will zoom until it fits the box (background size cover), since the image position is center, it will crop everything which is overlapping.

In my opinion, images with text are suboptimal for such an elements, since the column boxes goes responsive with the size of the window. You go from a rectangle to a square box. Most information will be lost, because the image tries to fit the box and have the focus on the middle.

The best and easiest way to "fix" the issue is to change

.bg--cover {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

to the following:

.bg--cover {
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Which will fix most of the issues, the only thing is, that you sometimes have a little whitespace on top and bottom of the image, but it will be fully readable.

I hope this helps you a little.

- Chris