Writing css background with PHP doesn't work?

Question

I'm trying to set a background image for the images preview of a gallery and nothing is shown. I'm using:

echo '<div class="prev" style="background-image:url(' . $image . ')"></div>';

In addition the prev class is:

.prev {
    width:120px;
    height:90px;
    background-size:cover;
    background-position:center; 
}

$image variable is ok, I echoed it for test, and when I put the same url (this echo) in a div not written by php, the image is shown perfectly.

just a minor style="background-image:url(' . $image . ');" add the semicolon ; — ScaisEdge
– ScaisEdge, Commented Jan 10, 2016 at 16:20

balping · Accepted Answer · 2016-01-10 16:49:02Z

1

url needs to be between quotes

echo '<div class="prev" style="background-image:url(\'' '. $image . '\');"></div>';

edited Jan 10, 2016 at 16:49

answered Jan 10, 2016 at 16:21

balping

8,0783 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lean2016 Over a year ago

But when I set the URL in CSS it works without quotes.... I tried your suggestion and result unfortunately is the same. Really weird.

lean2016 · Accepted Answer · 2016-01-10 17:22:20Z

1

I was correct:

echo '<div class="prev" style="background-image:url(' . $image . ')"></div>';

Works perfectly, the problem was the folder name (from where I get the $image variable), this folder contains a space, and PHP glob function reads the directory with spaces perfectly, so when I echo it I get something like:

images/name containing space/any_image.jpg

But CSS needs the URL without these spaces, to work it needs to replace the spaces with %20.

Thanks all for your expertise!

edited Jan 10, 2016 at 17:22

answered Jan 10, 2016 at 17:11

lean2016

1031 silver badge10 bronze badges

Collectives™ on Stack Overflow

Writing css background with PHP doesn't work?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related