background colour under the hero product image on debut

4 0 1

Hi, I have some product images that have a transparent area that I use radio buttons to change the colour of a div that sits underneath the hero image. I cannot seem to format the div to match the size of the hero image. The div is called JPbackground and is below. Any one who can help out? Thanks so much

The current div:


When I roll over, you can see the div is too big:







<!--top product section-->
  <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">
    <div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
      <div class="JPbackground"id="backcolour" >
      {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

      {%- for media in -%}
        {% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
      {%- endfor -%}

        {% capture product_image_size %}{{ height }}x{% endcapture %}
        <img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ }}" class="product-featured-media" style="max-width: {{ height }}px;">

      {% assign first_3d_model = | where: "media_type", "model" | first %}

      {%- if first_3d_model -%}
          aria-label="{{ 'products.product.view_in_space_label' | t }}"
          data-shopify-model3d-id="{{ }}"
          data-shopify-title="{{ product.title | escape }}"
          {% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
      {%- endif -%}





Shopify Partner
17277 1871 6459


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help
Shopify Expert | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
4 0 1

Thanks, I already worked it out