如何在不添加更多类的情况下将背景图像添加到 Div 内的 html？

Question

I'm working on my project which involves working with a map and adding locations inside pop-ups. In those locations, I added the name of the location, an image, and the address. Unfortunately, the image doesn't appear. I've tried several source links but it either doesn't show or it shows a very small image that appears to have been cut. Here's what I've done so far:

//javascript (This is just one of the locations but I have a lot more)

var restaurantMarkers = [
      {
        coords: { lat: 59.9178541, lng: 10.7339675 },
        content:
          '<div class="marker"><h6>Den Glade Gris</h6><img src="../images/restaurant1.jpg" alt="1" /><br><p>St. Olavs Gate 33</p></div>',
      },

//CSS (if I add backgroung-image to the css the image appears, but that means I would have to create several classes to add a background image to my locations and I have around 60 of them.

.marker{
    
    width: 120px;
    height: 110px;
}

Answer 1

The routing in separate JS files start from the location where the JS files was "included" from. So if your file structure looks like:

root/
├── index.html
└── assets/
    └── images/
      └── restaurant1.jpg
    └── js/
      └── googlemaps.js

And you're javascript file is linked in index.html , you need to start your routing from there (eg, background-image: url(assets/images/restaurant1.jpg) ).

Or if you're file structure looks like:

root/
├── index.html
└── views/
    └── map.html
└── assets/
    └── images/
      └── images.jpg
    └── js/
      └── googlemaps.js

And you're javascript file is linked in view/map.html , you need to start your routing from there (eg, background-image: url(../assets/images/restaurant1.jpg) ).

Keep in mind, these are examples, your file structure is probably different.

Answer 2

ok so this is what I did

background-image: url(assets/images/restaurant1.jpg);

with this the image appears, the problem now is that it's repeating so I tried this:

background-image: url(assets/images/restaurant1.jpg) no-repeat;

but when I add "no-repeat" the image is gone again

Answer 3

I managed to figure it out! Thanks everyone!

here's what I did:

<div class="marker" style="background: url(assets/images/restaurant1.jpg) no-repeat center">