escaping PHP in css background image, or problem in css syntax?-CodePudding

edit: found the solution. after asking around a lot, it seems that the problem lied on both. At first, it wont show because of double quotes. I removed that, and the browser is now supposed to render it just fine. Now the reason it didnt show up is because width and height were not set. I just set an arbitrary amount of both despite my CSS code, now I can see them lurking round the corner.

this could have been real simple but I could not get how this one works. I am building a slider and getting images from database using PHP.

The problem is the images wont display.

I am using this code to display the image thru CSS:

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

Everything totally works, from down to up, except that part where the image wont display. I even set the CSS for overlay-image such as

.overlay-image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-size: cover;
}

I removed that background-image style, and used img under it instead. It DOES show the image successfully albeit being screwed out of position (no design yet of course)

 <img src="'.$image.'">

The value of the $image contains the folder itself. the page im editing is the index) For example, if you print it out it will say uploads/img.jpg

I opened up the inspector and it showed:

I also tried this approach and it didnt work. Now I'm really confused about what is exactly the problem.

$image = $row['image'];
$image-bg-style = "background-image: url('".$image."'); ";

CodePudding user response：

Your problem is that you've run out of different quote marks:

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

You have these quotes all nested together:

The PHP single quotes '<div ...url("' and '");"></div>'
The HTML attribute quotes, style="...;"
The CSS quotes, url("...")

Note that the HTML and CSS quotes use the same character, so the browser doesn't know which is which. It's interpreting them like this:

An HTML attribute, style="background-image: url("
Some more HTML attributes with whatever PHP echoes from $image
A stray ");" on the end, which is probably just discarded

What you need to do is escape the CSS quotes appropriately to fit inside HTML - " becomes ":

$output .= '<div  style="background-image: url(&quot;'.$image.'&quot;);"></div>';

CodePudding user response：

As others pointed out: you're nesting double quotes inside double quotes:

$output = ' style=" background-image: url("'.$image.'") " '
                  ^                       ^          ^  ^

produces

style=" background-image: url( "_someurl_" ) "

interpreted by the browser as

style="background-image: url( "

_someurl_" ) "

What you want is single quotes around _someurl_:

style=" background-image: url( '_someurl_' ) "

But you can't use them straight ayway because then you're confusing PHP, as your string is already quoted with single quotes:

$output = ' style=" background-image:url( '_some_url_' ) " ';
          ^                               ^          ^     ^

will give a parse error.

So the trick is to use single quotes disguised as something that PHP does not recognize as single quotes, but the browser does. For that, you can replace the single quotes inside the string with

its HTML Entity equivalent '
chr(39), being the ascii charcter '

Your code would the be:

$output.= '<div  
           style="background-image: 
           url(&apos;'.$image.'&apos;);"></div>

$output.= '<div  
           style="background-image: 
           url('.chr(39).$image.chr(39).');"></div>