Image Issues

[aa2zz6]

I am having some issues getting this image to set properly on our website. The first image in the cornerstone editing session looks great but on the live preview it’s totally different. Also, beside the image not projecting correctly during the live preview it also doesn’t scale when the device gets smaller so the kid on the picture will disappear completely.

[christian]

Hey @aa2zz6,

The reason for that is in the first image, the side panel takes space. Try collapsing the panel and you’ll see that it will be the same as in the live version. What happens is the background image covers the area out of the box. That is why the background display differs on different screen sizes. Please set your background size to contain if you need all the information in your image.

Also adjust the background position to suite your needs.

For more values you can use in the Size, please see https://www.w3schools.com/cssref/css3_pr_background-size.asp

For the Position, please see https://www.w3schools.com/cssref/pr_background-position.asp

Thanks.

[aa2zz6]

I looked at the examples on w3schools but I can’t find a solution to fix my issue. When the website width decreases the image stops resizing and by the time the website is in phone compatibility mode the image with the kid is completely off view

[rad]

Hi there,

It’s because of the fixed values that you added through this CSS

.my-first-section {
    height: 650px;
    background-position: 0% 80% !important;
    background-repeat: no-repeat;
    background-size: auto;
}

It will remain the same regardless of device, let’s make it responsive by changing it to this

.my-first-section {
    height: 0px;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto;
    padding-bottom: 50% !important;
}

Thanks!