background-image is not displayed - any ideas why? WordPress

• SOLVED

I tried to add the Leaflet fullscreen plugin (https://github.com/mapbox/Leaflet.fullscreen) to my maps, demo here: http://pro.mapsmarker.com/?p=11

This plugin adds the following code to my maps html:

<div class="leaflet-control-fullscreen leaflet-bar leaflet-control"><a class="leaflet-control-fullscreen-button leaflet-bar-part" href="#" title="View Fullscreen"></a></div>

Within leaflet.css I also added the needed css styles:

.leaflet-control-fullscreen a {
background-image: url("images/fullscreen.png");
}

As you can see on the demo map (or from the image attached), the fullscreen.png image is not displayed - although it gets loaded (if you check the small square with firebug, you see that the background image is loaded).

Here is a screenshot of how the fullscreen control should look like: http://tinypic.com/r/2jb8sau/6

Can anyone give me a hint why this background image is not displayed?
thx

Robert

Answers (3)

2013-03-18

Daniel Yoen answers:

leaflet.css:632


.leaflet-control-fullscreen a {
background-image: url("images/fullscreen.png");
background-position: center center;
width: 22px;
height: 22px;
display: block;
}

hope this help :-)

---

Daniel Yoen comments:

leaflet.css:632

.leaflet-control-fullscreen a {
background-image: url("images/fullscreen.png");
background-position: center center;
background-repeat: no-repeat;
width: 22px;
height: 22px;
display: block;
}

2013-03-18

Dbranes answers:

<strong>Update 1 - I'm having problems updating the answer, getting Symfony 500 errors, let's try again :</strong>

<strong>Update 2: </strong> The problem comes up when I try to upload a screenshot to my answer.

ps: I ended up with similar css as <em>@Daniel Yoen</em>, so I remove my answer and the screenshot I was trying to upload ;-)

2013-03-18

MDan answers:

What browser do you use?

Is the image file path relative in the CSS file?
If it is you can try a absolute path. Also make sure the path is correct:

background-image: url("/path/to/image/file.png");

Try to add
display:block to the css property.