JustBasti JustBasti - 1 month ago 9
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

<div>
. 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:

HTML/PHP

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


CSS

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


I'm iteration through an array of
$picture-objects
. Each object has a
thumbPath
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
background-image
of a
div-tag
;) Hilarious, isn't it?

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

Answer

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.)