CMS Development

ChristineGBaker
Member

Help with featured webinar image

SOLVE

Original imageOriginal 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 websiteCurrent image on website

0 Upvotes
1 Accepted solution
Chris-M
Solution
Top Contributor

Help with featured webinar image

SOLVE

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

View solution in original post

2 Replies 2
ChristineGBaker
Member

Help with featured webinar image

SOLVE

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

 

Here is the link to the table 

0 Upvotes
Chris-M
Solution
Top Contributor

Help with featured webinar image

SOLVE

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