background-image in -tag not showing up

Question

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 1

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

Answer 2

My path contained spaces. Just deleted them and it worked!

Answer 3

style=" background-image:url(<?php echo get_template_directory_uri(); ?>/image/project1.png);

Write this code before path <?php echo get_template_directory_uri(); ?>/