Background Images?

  • Resolved wshop

    (@wshop)


    3 years, 2 months ago

    Hi, I’d like to have 2 additional background Images per Product-variable that are
    behind Image1.png(front view) and Gallery1.png(back view)..

    How could I do this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter wshop

    (@wshop)

    Ok, I added background.jpg with CSS on SlickTrack.. but how to apply 2 different Backgrounds if “Blur” is active?

    <div class="woo-variation-gallery-container preload-style-blur">
<div class="woo-variation-gallery-slider-wrapper">
<div class="woo-variation-gallery-slider slick-initialized slick-slider" data-slick="{&quot;slidesToShow&quot;:1,&quot;slidesToScroll&quot;:1,&quot;arrows&quot;:false,&quot;adaptiveHeight&quot;:true,&quot;rtl&quot;:false,&quot;prevArrow&quot;:&quot;<i class=\&quot;wvg-slider-prev-arrow dashicons dashicons-arrow-left-alt2\&quot;><\/i>&quot;,&quot;nextArrow&quot;:&quot;<i class=\&quot;wvg-slider-next-arrow dashicons dashicons-arrow-right-alt2\&quot;><\/i>&quot;,&quot;speed&quot;:300,&quot;autoplay&quot;:true,&quot;autoplaySpeed&quot;:5000,&quot;fade&quot;:true}">
<div class="slick-list draggable" style="height: 681px;"><div class="slick-track" style="opacity: 1; width: 522px;"><div class="wvg-gallery-image slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 261px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;" tabindex="0">
<div>
<div class="wvg-single-gallery-image-container">
 <img loading="lazy" class="wp-post-image wvg-post-image attachment-woocommerce_single size-woocommerce_single " width="509" height="1329" src="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red.png" alt="" title="Product-Red" data-caption="" data-src="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red.png" data-large_image="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red.png" data-large_image_width="509" data-large_image_height="1329" srcset="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red.png 509w, https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-115x300.png 115w, https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-392x1024.png 392w, https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-37x96.png 37w" sizes="(max-width: 509px) 100vw, 509px">
</div>
</div>
 </div><div class="wvg-gallery-image slick-slide" data-slick-index="1" aria-hidden="true" style="width: 261px; position: relative; left: -261px; top: 0px; z-index: 998; opacity: 0; transition: opacity 300ms ease;" tabindex="-1">
<div>
<div class="wvg-single-gallery-image-container">
<img loading="lazy" class="wp-post-image wvg-post-image attachment-woocommerce_single size-woocommerce_single " width="509" height="1329" src="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-b.png" alt="" title="Product-Red-b" data-caption="" data-src="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-b.png" data-large_image="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-b.png" data-large_image_width="509" data-large_image_height="1329" srcset="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-b.png 509w, https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-b-115x300.png 115w, https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-b-392x1024.png 392w, https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-b-37x96.png 37w" sizes="(max-width: 509px) 100vw, 509px">
</div>
 </div>
 </div></div></div>
</div>
</div> <!-- .woo-variation-gallery-slider-wrapper -->
<div class="woo-variation-gallery-thumbnail-wrapper">
<div class="woo-variation-gallery-thumbnail-slider woo-variation-gallery-thumbnail-columns-4" data-slick="{&quot;slidesToShow&quot;:4,&quot;slidesToScroll&quot;:4,&quot;focusOnSelect&quot;:true,&quot;arrows&quot;:false,&quot;asNavFor&quot;:&quot;.woo-variation-gallery-slider&quot;,&quot;centerMode&quot;:true,&quot;infinite&quot;:true,&quot;centerPadding&quot;:&quot;0px&quot;,&quot;rtl&quot;:false,&quot;prevArrow&quot;:&quot;<i class=\&quot;wvg-thumbnail-prev-arrow dashicons dashicons-arrow-left-alt2\&quot;><\/i>&quot;,&quot;nextArrow&quot;:&quot;<i class=\&quot;wvg-thumbnail-next-arrow dashicons dashicons-arrow-right-alt2\&quot;><\/i>&quot;,&quot;responsive&quot;:[{&quot;breakpoint&quot;:768,&quot;settings&quot;:{&quot;vertical&quot;:false}},{&quot;breakpoint&quot;:480,&quot;settings&quot;:{&quot;vertical&quot;:false}}]}">
<div class="wvg-gallery-thumbnail-image current-thumbnail">
<div>
<img class="attachment-100x100 size-100x100" width="100" height="100" src="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-100x100.png" alt="" title="Product-Red">
</div>
 </div>
<div class="wvg-gallery-thumbnail-image">
  <div>
<img class="attachment-100x100 size-100x100" width="100" height="100" src="https://www.MyDomain.com/wp-content/uploads/2022/01/Product-Red-b-100x100.png" alt="" title="Product-Red-b">
  </div>
 </div>
</div>
</div> <!-- .woo-variation-gallery-thumbnail-wrapper -->
</div>
    Plugin Support fizanzvai

    (@fizanzvai)

    Hi @wshop ,

    Thanks for reaching out to us. Did you try our latest version 1.3.0?

    Please check our latest release and let us know if it works.

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Background Images?’ is closed to new replies.