background colour under the hero product image on debut

[potandberry]

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 product.media -%}
        {% 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 -%}

      <noscript>
        {% 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-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
      </noscript>

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

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

[KetanKumar]

@potandberry 

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.

[potandberry]

Thanks, I already worked it out 🙂

[potandberry]

Hi, KetanKumar, sadly I actually could not get this to work in the end. I tried 2 ways:

With a div underneath: https://potandberry.com/products/bespoke-round-vase-20cm?variant=39747734798501 I could not get this to align properly.

By changing the background colour: https://potandberry.com/products/bespoke_25_round_vase

But the background colour styling would not work on this page: https://potandberry.com/products/bespoke-round-vase-20cm?variant=39747734798501

Website password is teuguy. Any help would be amazing! Thank you

[KetanKumar]

@potandberry 

thanks for detail

sorry but can you please clear what do you want exactly? 

[potandberry]

Hi, so sorry for confusing. I would like the coloured div called JPbackground to align perfectly to the hero image and change size as the hero image does. The coloured div changes colour depending on the coloured buttons underneath.

https://potandberry.com/products/bespoke-round-vase-20cm?variant=39780041556133

[potandberry]

I have actually fixed this now. Thanks again anyway!

[KetanKumar]

@potandberry 

great thanks for update