Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 28, 2017 at 2:08 am #857772
    agougo

    Hi all,

    I need some help for a new website that I am building. This one has a shop and i enabled the Image from the Enfold Shop Options. This image that i want to display is 1310px x 220px. I am trying to make it appear normally without the paralax effect but i am failing. I have included this on my Quick CSS box but the image is displayed at the bottom of the banner. It is like it is being shifted downwards. Can anyone help?

    .av-parallax-inner { background-size: 1310px 220px !important; }
    #av_product_description { height: 220px !important; }

    Thank you

    September 29, 2017 at 9:48 am #858367
    Ismael

    Hey agougo,

    Thank you for using Enfold.

    Please remove the previous modification then apply the background image to the parent container.

    #av_product_description {
    background-image: url(IMAGE URL HERE);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

#av_product_description .av-parallax-inner.av-parallax-woo {
    background-image: none;
}

    Adjust the background-size property value if needed.

    Best regards,
    Ismael

    September 29, 2017 at 11:26 am #858425
    agougo

    Hi Ismael,

    Thank you for your response. I think i figured it out. Since my image has specific dimensions 1310px x 220px I added the following code and it works now.

    
#av_product_description .av-parallax { transform: none!important; }
#av_product_description { height: 220px; }
#av_product_description .av-parallax-inner {
    background-size: initial;
    background-position: 50% 100% !important;
    }

    In other words – I removed the parallax effect, i added a specific size to the container and fixed the background. And because i wanted to make the image disappear on smaller screens this is my final solution.

    
@media only screen and (min-width: 990px) {
#av_product_description .av-parallax { transform: none!important; }
#av_product_description { height: 220px; }
#av_product_description .av-parallax-inner {
    background-size: initial;
    background-position: 50% 100% !important;
    }
}

@media only screen and (max-width: 989px) {
#av_product_description .av-parallax { transform: none!important; }
#av_product_description { display: none!important; }
}

    This works now, but if you have any suggestions on how to make it prettier they would be most welcome :)

    Thank you so much for your support

    September 29, 2017 at 11:43 am #858437
    Ismael

    Hi,

    Alright. Glad that you figured it out. You can also try the suggestion above.

    Best regards,
    Ismael

    September 29, 2017 at 11:44 am #858438
    agougo

    Thank you Ismael,

    You can close the ticket. The best support by the best theme :)

    September 30, 2017 at 6:35 am #858664
    Ismael

    Hi,

    Thank you for the kind words. Let us know if you need anything else. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Shop Banner Image – Woocommerce: Banner Image not displayed correctly.’ is closed to new replies.