How to add a background image to Details View / Popover / Tooltip

1. Open WP Media Library

2. Find an image that you want to add to the background, or upload a new one

3. Click on the image

4. Click on the "Copy URL to clipboard" button

5. Go to the MapSVG editor, open the map editing page

6. Go to the CSS tab

7. Add the following code to the CSS editor, replacing COPIED_IMAGE_URL with the URL you have copied earlier. If you're working with Tooltips, replace the class name .mapsvg-details-container with .mapsvg-tooltip. If you're working with Popovers, use .mapsvg-popover class instead:

.mapsvg-details-container {
  background: url(COPIED_IMAGE_URL);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;  
}

8. That's it!

9. If your image makes the text unreadable, wrap the Details View content with a div container using .mapsvg-inner (or any other class name) class:

<div class="mapsvg-details-inner">
  <h5>{{title}}</h5>
</div>

8. Then add the following code that adds a white container on top of the background image:

.mapsvg-details-inner {
  background: rgba(255,255,255,0.7);
  padding: 20px;
  border-radius: 10px;
}