JustBasti JustBasti - 11 months ago 57
CSS Question

background-image in <div>-tag not showing up

im outquestioned. I just wanted to develop my own gallery, but then I already failed at the very start: Displaying an image as a background in a

. I have turned my code upside down, searched the web, searched stackoverflow, though I'm not able to solve the problem.

Here's my code:


<div class="imageholder" style="background-image:url(<?php echo $picture->thumbPath; ?>);"></div>


.imageholder {
width: 150px;
height: 150px;
float: left;
background-size: fill;
background-position: 50% 50%;

I'm iteration through an array of
. Each object has a
for its' thumb image. the paths are correct. checked them multiple times.

Here's the output of Firebug:

<div class="imageholder" style="background-image:url(./users/basti/img/20130825155015-tb-From Peth to Darwin/thumb/20130825155015-tb-DSC_0316_REZ.jpg);"></div>

I already thought of the path having the wrong format, though I'm using the same file paths on an other project where everything works. even displaying the same picture as a
of a
;) Hilarious, isn't it?

Do you have any idea what's wrong with my code? Thanks!

Answer Source

It seems there are some space characters in your image path, Try to put your path in quote:

url('./users/basti/img/20130825155015-tb-From Peth to Darwin/thumb/20130825155015-tb-DSC_0316_REZ.jpg');

As an alternative, you can convert the spaces to %20, simply by str_replace():

background-image:url(<?php echo str_replace(' ', '%20', $picture->thumbPath) ?>);

(rawurlencode() is the way to encode URL, but in this case all the forward slashes will be converted.)