Shop Banner Full Title

Hi nuncer!

Please add following code to Quick CSS in Enfold theme options under General Styling tab

#av_product_description .av-parallax-inner { background-size: contain; }

Also, please insert your image in full size.

Cheers!
Yigit

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

#av_product_description h1 {
    color: white;
    font-size: 26px;
}
#av_product_description .av-parallax-inner {
    background-position: 50% 45%!important;
}

Best regards,
Yigit

Hi,

The easiest solution is to set the background-size property to “cover”. This will force the background image to cover the whole container.

#av_product_description .av-parallax-inner {
    background-size: cover;
}

If you’re not satisfied with the result, you can create multiple images for each category then apply it on different screen sizes by using css media queries which is a bit inconvenient.

Best regards,
Ismael

Hi,

banner is out of focus and it shows only a center part of it

This is an issue with the “cover” value because it stretches the image and in order to keep its aspect ratio, the edges of the image will overflow outside the container. We can set the value to 100% but it will probably distort the image.

#av_product_description .av-parallax-inner {
    background-size: 100% 100%;
}

Best regards,
Ismael

Hey!

The other solution is to create multiple versions of the images but it’s a bit inconvenient as we mentioned in our previous post. You can also set the background size property to “contain” but it will create gaps or spaces if the container is not equal to the background image.

#av_product_description .av-parallax-inner {
    background-size: contain;
}

The current height of the container is 263px but the background image is a bit too small (300x45px) so it will create a lot of spaces.

// https://profumidambiente.it/wp-content/uploads/2016/12/shopbanner1-300×45.png

Regards,
Ismael