Question

Okay, so here’s my code:

echo "<span style='float:right; text-align:right; background-image:url('" . $icon_url . "') no-repeat top right; height:86px; width:86px; display:block;'>" . $curr_temp . "<br />" . $curr_cond . "</span>";

This works perfect, with temperature and conditions displayed on the right side of the page just how I want it, but the background image will not work. When I view source in chrome I get:

<span style='float:right; text-align:right; background-image:url('http://forecast.weather.gov/images/wtf/medium/sct.png') no-repeat top right; height:86px; width:86px; display:block;'>35&deg;F<br />Fair</span>

which at least looks right to me, but if I go to inspect element (in Chrome) it shows the size of the as 31px*40px, and the code as:

<span style="float:right; text-align:right; background-image:url(" http:="" forecast.weather.gov="" images="" wtf="" medium="" sct.png')="" no-repeat="" top="" right;="" height:86px;="" width:86px;="" display:block;'="">35°F<br>Fair</span>

which is most definitely incorrect. If I change it to be correct in the inspect element box it shows the background image fine, but still only part of it as the span stays at 31×40 instead of the 86*86 I defined it as. What am I screwing up here? I just can’t figure it out.

Answer 1

Element attributes should be surrounded by double quotes according to the standards. Also the background url shouldn’t contain any quotes at all.

Try:

echo '<span style="float:right; text-align:right; background:url(' . $icon_url . ') no-repeat top right; height:86px; width:86px; display:block;">' . $curr_temp . '<br />' . $curr_cond . '</span>';