Title: Image Hotspot: avoid resizing background image
Last modified: April 30, 2020

---

# Image Hotspot: avoid resizing background image

 *  Resolved [despachotres](https://wordpress.org/support/users/despachotres/)
 * (@despachotres)
 * [6 years ago](https://wordpress.org/support/topic/image-hotspot-avoid-resizing-background-image/)
 * Hi,
 * In the image hotspot, the image is resized when the browser is resized. That 
   is, the width of the image will be also the 100% of the screen.
 * Is it possible to have the image fixed, avoiding to be resized? For example, 
   I take a screenshot of a city map 1600 x 400 pixels .
 * Then, as you downsize the browser with, the image is not resized. The image is
   less visible (being hidden laterally), as it happens when you have a <div> with
   a fixed background image.
 * See this video screenshot: [https://take.ms/r7vsaC](https://take.ms/r7vsaC) It’s
   the typical google maps that keeps dimensions as you resize the browser’s window.
   That’s what I’m looking for with the Image Hotspot block.
 * Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Support [dimned](https://wordpress.org/support/users/dimned/)
 * (@dimned)
 * [6 years ago](https://wordpress.org/support/topic/image-hotspot-avoid-resizing-background-image/#post-12764673)
 * Hi [@despachotres](https://wordpress.org/support/users/despachotres/),
 * Thas for your question. That is rather a custom request that can be resolved 
   by using Google Maps. As a workaround, you may try to add this filter (functions.
   php file of the theme) to force the display of the indicated image in the fixed
   size:
 *     ```
       add_filter('wp_calculate_image_srcset', 'my_theme_calculate_scrset', 10, 5);
       function my_theme_calculate_scrset($sources, $size_array, $image_src, $image_meta, $attachment_id){  
           if($attachment_id == 414){
               return false;
           }
           return $sources;
       }
       ```
   
 * You need to replace 414 with ID of your image that you use in Image Hotspot block.
 * Then you will need to add the style to add horizontal scroll for the image hotspot:
 *     ```
       .wp-block-getwid-image-hotspot__wrapper{
           overflow-y: auto;
       }
   
       .wp-block-getwid-image-hotspot__image{
           max-width: none;
       }
       ```
   
 * I hope it is helpful.
 * regards,
    MotoPress Support
 *  Thread Starter [despachotres](https://wordpress.org/support/users/despachotres/)
 * (@despachotres)
 * [6 years ago](https://wordpress.org/support/topic/image-hotspot-avoid-resizing-background-image/#post-12777467)
 * HI,
 * Thanks for the reply. But there’s only one CSS selector needed
 *     ```
       .wp-block-getwid-image-hotspot__image { 
       	max-width: none;
       	margin-left: 50%;
       	transform: translateX(-50%);
       }
       ```
   
 * This will make the image of the Hotspot not being resized, and it will hide centered
   inside its parent’s div.
 * Thanks again!!!
 *  Plugin Support [dimned](https://wordpress.org/support/users/dimned/)
 * (@dimned)
 * [6 years ago](https://wordpress.org/support/topic/image-hotspot-avoid-resizing-background-image/#post-12782317)
 * Hi [@despachotres](https://wordpress.org/support/users/despachotres/),
    Thanks
   for your update. It would be highly appreciated if you rate Getwid plugin here
   [https://wordpress.org/support/plugin/getwid/reviews/](https://wordpress.org/support/plugin/getwid/reviews/)
 *  Thread Starter [despachotres](https://wordpress.org/support/users/despachotres/)
 * (@despachotres)
 * [6 years ago](https://wordpress.org/support/topic/image-hotspot-avoid-resizing-background-image/#post-12782339)
 * Done!!!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Image Hotspot: avoid resizing background image’ is closed to new replies.

 * ![](https://ps.w.org/getwid/assets/icon.svg?rev=2238400)
 * [Getwid - Gutenberg Blocks](https://wordpress.org/plugins/getwid/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/getwid/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/getwid/)
 * [Active Topics](https://wordpress.org/support/plugin/getwid/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/getwid/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/getwid/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [despachotres](https://wordpress.org/support/users/despachotres/)
 * Last activity: [6 years ago](https://wordpress.org/support/topic/image-hotspot-avoid-resizing-background-image/#post-12782339)
 * Status: resolved