echo background-image

Question

I am trying echo a background-image inside a .phtml to send an email.

However i am having troubles with the quotes. The image is not shown.

<?php echo '
    Plataforma <a href="http://xxxx.com/">http://xxxx.com/</a>
    <br>
    <div style="width:220px; height:30px; background-color:black; background-repeat: no-repeat; background-image:url("http://www.inova-ria.pt/images/UebeImg/Thumb/Img_153_363_T.jpg")"></div>
'
?>

The IDE validate this code as correct, but the image is not shown in the email that is sent.

Answer 1

<?php echo '
    Plataforma <a $href="http://xxxx.com/">http://xxxx.com/</a>
    <br>
    <div $style="width:220px; height:30px; background-color:black; background-repeat: no-repeat; background-image:url(\"http://www.inova-ria.pt/images/UebeImg/Thumb/Img_153_363_T.jpg\")"></div>
    '
?>

Value of style attribute is enclosed by double quotes, so any double quota inside must be escaped.

Answer 2

You need to change this:

background-image:url("http://www.inova-ria.pt/images/UebeImg/Thumb/Img_153_363_T.jpg")

to:

background-image:url('http://www.inova-ria.pt/images/UebeImg/Thumb/Img_153_363_T.jpg')

The double quotes are cutting off your DOM in the wrong place, causing it to mis-read.

Answer 3

Your CSS is invalid. Change this line:

background-image:url("http://www.inova-ria.pt/images/UebeImg/Thumb/Img_153_363_T.jpg")

to read like this:

background-image:url('http://www.inova-ria.pt/images/UebeImg/Thumb/Img_153_363_T.jpg')

Because it's inside a style="" attribute, the " symbols in the background-image line are signalling the end of the style attribute instead of the path for your image.

Answer 4

Try using single escaped quotes, like this in URL of image:

<?php echo '
    Plataforma <a href="http://xxxx.com/">http://xxxx.com/</a>
    <br>
    <div style="width:220px; height:30px; background-color:black; background-repeat: no-repeat; background-image:url(\'http://www.inova-ria.pt/images/UebeImg/Thumb/Img_153_363_T.jpg\')"></div>
'
?>

Answer 5

None of the other answers fixed the problem (gmail, hotmail). This will work

<?php echo '
    Plataforma <a href="http://xxxx.com/">http://xxxx.com/</a>
    <br>
    <div style="width:220px; height:30px; background-color:black;">
        <img src="http://www.inova-ria.pt/images/UebeImg/Thumb/Img_153_363_T.jpg">
    </div>
    '; ?>