title: div background-image url as string
body: <p>How can i make a div background image read a string url? I'm trying to grab code from my Shoutcast source and ive already used an rtrim code to grab the last x characters from the right of the file, then have the code make that a string of its own, then remove from the original string. Now i want the second string to be put infront of an image format (.jpg) and read the image as a background image to my div object.</p>
  
  <pre><code>&lt;head&gt;
  $song2 = $song
  .a-art {background-image: url('.$song2.'.jpg);}
  &lt;/head&gt;&lt;body&gt;
  
  &lt;div class="a-art"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>FROM FULL SOURCE</p>
  
  <pre><code>  &lt;?php
  
  
  
  include('config_radio.php');
  
  
  
  $scfp = fsockopen("$scip", $scport, &amp;$errno, &amp;$errstr, 30);
  
   if(!$scfp) {
  
    $scsuccs=1;
  
  echo''.$scdef.' is Offline'; 
  
   }
  
  if($scsuccs!=1){
  
   fputs($scfp,"GET /admin.cgi?pass=$scpass&amp;mode=viewxml HTTP/1.0\r\nUser-Agent: SHOUTcast Song Status (Mozilla Compatible)\r\n\r\n");
  
   while(!feof($scfp)) {
  
    $page .= fgets($scfp, 1000);
  
   }
  
  ######################################################################################################################
  
  /////////////////////////Teil 1 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
  
  //definieren der xml elemente
  
   $loop = array("STREAMSTATUS", "BITRATE", "SERVERTITLE", "CURRENTLISTENERS", "MAXLISTENERS", "BITRATE");
  
   $y=0;
  
   while($loop[$y]!=''){
  
    $pageed = @ereg_replace(".*&lt;$loop[$y]&gt;", "", $page);
  
    $scphp = strtolower($loop[$y]);
  
    $$scphp = @ereg_replace("&lt;/$loop[$y]&gt;.*", "", $pageed);
  
    if($loop[$y]==SERVERGENRE || $loop[$y]==SERVERTITLE || $loop[$y]==SONGTITLE || $loop[$y]==SERVERTITLE)
  
     $$scphp = urldecode($$scphp);
  
    $y++;
  
   }
  
  //ende intro der xml elemente
  
  ######################################################################################################################
  
  ######################################################################################################################
  
  /////////////////////////Teil 2\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
  
  //Song Info und History holen.
  
   $pageed = @ereg_replace(".*&lt;SONGHISTORY&gt;", "", $page);
  
   $pageed = @ereg_replace("&lt;SONGHISTORY&gt;.*", "", $pageed);
  
   $songatime = explode("&lt;SONG&gt;", $pageed);
  
   $r=1;
  
   while($songatime[$r]!=""){
  
    $t=$r-1;
  
    $playedat[$t] = @ereg_replace(".*&lt;PLAYEDAT&gt;", "", $songatime[$r]);
  
    $playedat[$t] = @ereg_replace("&lt;/PLAYEDAT&gt;.*", "", $playedat[$t]);
  
    $song[$t] = @ereg_replace(".*&lt;TITLE&gt;", "", $songatime[$r]);
  
    $song[$t] = @ereg_replace("&lt;/TITLE&gt;.*", "", $song[$t]);
  
        if (strlen($song[$t]) &gt; 50)       {                   $song[$t] = substr($song[$t], 0, 50) . '...';       }
       $song2 = substr($song[$t], -5);
       &lt;?php $file = "$song2"; ?&gt;
        $song[$t] = urldecode($song[$t]);
       $stemp = explode("[", $song[$t]);
       $song[$t] = $stemp['0'];
       $dj[$t] = @ereg_replace(".*&lt;SERVERTITLE&gt;", "", $page);
  
    $dj[$t] = @ereg_replace("&lt;/SERVERTITLE&gt;.*", "", $pageed);
  
  $r++;
  
   }
  
  //end song info
  
  fclose($scfp);
  
  }
  
  
  
  //Anzeige
  
  if($streamstatus == "1"){
  
  
  
  echo'
  
  &lt;html&gt; &lt;head&gt; &lt;title&gt;Radiostatus&lt;/title&gt; &lt;meta http-equiv="refresh" content="20; URL=radiostatus.php"&gt;  &lt;link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css"&gt; &lt;style type="text/css"&gt; body {font-weight: bold; font-size: 11px; font-family: Arial, Verdana; color: #911c15; text-shadow: 1px 1px 0px #ee9955;} .inlineimg {position: absolute; right: 22px; top: 11px;} .playerid {position: absolute; right: 40px; top: 8px;} .header-subfont {color: #FFF; text-transform: capitalize; font-size: 14px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; font-family: "Francois One",sans-serif;} .connect {color: #FFF; font-size: 11px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; /* font-family: "Francois One",sans-serif;*/ font-family: Arial, Verdana; } .help {position: absolute; right: 2px; top: 8px;}  .radio-content {font-size: 11px; height: 40px; margin-right: 15px; font-weight: bold; font-family: Arial, Verdana; /* background: url(x2/images/literecords/misc/literadio-icon.png) no-repeat center left; padding-left: 37px; */ color: #911c15; text-shadow: 1px 1px 0px
  #ee9955;} span.question {   cursor: pointer;   width: 16px;   height: 16px;   background-color: #9F3422;   color: White;   font-size: 13px;  font-weight: bold;   border-radius: 8px;   text-align: center; } span.question:hover { background-color: #3D6199; } div.tooltip {   background-color: #333;   color: White;   position: absolute;   left: 25px;   top: -25px;   z-index: 1000000;   width: 250px;   border-radius: 5px; } div.tooltip:before {   border-color: transparent
  #333 transparent transparent;   border-right: 6px solid #333;   border-style: solid;   border-width: 6px 6px 6px 0px;   content: "";   display: block;   height: 0;   width: 0;   line-height: 0;   position: absolute;   top: 40%;   left: -6px; } div.tooltip p {   margin: 10px;  color: White; } .song-links a, .song-links { font-size: 8px; text-decoration: none; font-weight: normal; text-shadow: none; color:
  #fff;} .song-bg {background-image: url(blackgrad.png); background-size: 100% 100%; position: fixed; right: 6px; font-weight: normal !important; text-transform:capitalize; box-shadow: 0px 0px 1px 1px #cccccc; border-radius: 8px; margin-top: 4px; margin-bottom: 4px; margin-right: 4px; padding: 8px; color: #ffffff; text-shadow: 1px 1px 0px #494949; width: 150px; height: 26px;} .a-art {position: fixed; box-shadow: 0px 0px 1px 1px #cccccc; border-radius: 8px; margin-top: 4px; margin-bottom: 4px; margin-right: 4px; color: #ffffff; text-shadow: 1px 1px 0px #494949; width: 45px; height: 42px; background-image: url('&lt;?php echo '/albumart/'. $file.'.jpg'; ?&gt;'); background-size: 100% 100%; background-repeat: no-repeat;}
  
  .header-font {color: #FFF; text-transform: uppercase; font-size: 15px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; font-family: "Francois One",sans-serif; margin-left: 40px; margin-top: -27px;} .lst-bg {font-weight: normal !important; text-transform:capitalize; box-shadow: 0px 0px 1px 1px #cccccc; border-radius: 8px; margin-top: 0px; margin-bottom: 10px; width: 45px; color: #ffffff; text-shadow: 1px 1px 0px #494949;} .lstnrs {align: center; font-weight: normal; margin-top: -13px; text-align: center; float: left; margin-left: 5px; width: 35px; color: #ffffff; text-shadow: 1px 1px 0px #494949;
  
  &lt;/style&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://literecords.com/drop.js"&gt;&lt;/script&gt; &lt;/head&gt;
  
  &lt;div class="radio-content"&gt; &lt;div class="lst-bg"&gt;&lt;span title="Online"&gt;&lt;img src="on.png" /&gt;&lt;/span&gt;&lt;span align="center" class="lstnrs"&gt;&amp;nbsp;&amp;nbsp;'.$currentlisteners.'&lt;/span&gt;&lt;/div&gt; &lt;div class="header-font"&gt;&amp;nbsp;&amp;nbsp; LRR&lt;/div&gt; &lt;div class="a-art"&gt;&lt;/div&gt; &lt;div class="song-bg"&gt; '.$song[0].' . '.$song2.'&lt;/div&gt;&lt;/div&gt; &lt;center&gt;&lt;table border="0" cellspacing="0" cellpadding="0" style="display: none;"&gt;
  
  &lt;tr&gt; &lt;td align="center"&gt;&lt;font color="#33ff00" size=1.5 face="verdana, geneva, lucida"&gt;&lt;b&gt;Server is Online&lt;/b&gt;&lt;/font&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;
  
  &lt;tr&gt; &lt;td align="center"&gt;&lt;font color="#000000" size=1.5 face="verdana, geneva, lucida"&gt;Online with: '.$currentlisteners.' / '.$maxlisteners.' listeners&lt;/font&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt;&lt;b&gt;&lt;font color="#000000" size=1.5 face="verdana, geneva, lucida"&gt;'.$song[0].'&lt;/font&gt;&lt;/b&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt;&lt;font color="#000000" size=1.5 face="verdana, geneva, lucida"&gt;&lt;a href="http://lazyrecords.net:8020" target="_blank"&gt;http://lazyrecords.net:8020&lt;/a&gt;&lt;/font&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt;&lt;a href="http://lazyrecords.net:8020/listen.pls"&gt;&lt;font color="#000000" size=1.5 face="verdana, geneva, lucida"&gt;iPhone&lt;/font&gt;&lt;/a&gt; - &lt;a href="listen.asx" target="_blank"&gt;&lt;font color="#000000" size=1.5 face="verdana, geneva, lucida"&gt;Windows&lt;/font&gt;&lt;/a&gt; - &lt;a href="listen_qt.php" target="_blank"&gt;&lt;font color="#000000" size=1.5 face="verdana, geneva, lucida"&gt;Mac&lt;/a&gt;&lt;/font&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt;&lt;a href="http://lazyrecords.net/network/content.php?131-How-to-tune-in" target="_blank"&gt;&lt;font color="#000000" size=1.5 face="verdana, geneva, lucida"&gt;Cant Tune-In?&lt;/font&gt;&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;/table&gt;&lt;/center&gt;
  
  &lt;/body&gt; &lt;/html&gt;';
  
  }
  
  if($streamstatus == "0") {
  
  //Offlinestatus
  
  echo'
  
  &lt;html&gt;
  
  &lt;head&gt; &lt;title&gt;Radiostatus&lt;/title&gt; &lt;meta http-equiv="refresh" content="20; URL=radiostatus.php"&gt;  &lt;link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css"&gt; &lt;style type="text/css"&gt; body {font-weight: bold; font-size: 11px; font-family: Arial, Verdana; color: #911c15; text-shadow: 1px 1px 0px #ee9955;} .inlineimg {position: absolute; right: 22px; top: 11px;} .playerid {position: absolute; right: 40px; top: 8px;} .header-font {color: #FFF; text-transform: uppercase; font-size: 15px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; font-family: "Francois One",sans-serif; margin-left: 40px; margin-top: -27px;} .header-subfont {color: #FFF; text-transform: capitalize; font-size: 14px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; font-family: "Francois One",sans-serif;} .connect {color: #FFF; font-size: 11px; font-weight: normal; text-shadow: 1px 1px 0px
  #d34715; /* font-family: "Francois One",sans-serif;*/ font-family: Arial, Verdana; } .help {position: absolute; right: 2px; top: 8px;}  .radio-content {font-size: 11px; height: 40px; margin-right: 15px; font-weight: bold; font-family: Arial, Verdana; /* background: url(x2/images/literecords/misc/literadio-icon.png) no-repeat center left; padding-left: 37px; */ color: #911c15; text-shadow: 1px 1px 0px
  #ee9955;} span.question {   cursor: pointer;   width: 16px;   height: 16px;   background-color: #9F3422;   color: White;   font-size: 13px;  font-weight: bold;   border-radius: 8px;   text-align: center; } span.question:hover { background-color: #3D6199; } div.tooltip {   background-color: #333;   color: White;   position: absolute;   left: 25px;   top: -25px;   z-index: 1000000;   width: 250px;   border-radius: 5px; } div.tooltip:before {   border-color: transparent
  #333 transparent transparent;   border-right: 6px solid #333;   border-style: solid;   border-width: 6px 6px 6px 0px;   content: "";   display: block;   height: 0;   width: 0;   line-height: 0;   position: absolute;   top: 40%;   left: -6px; } div.tooltip p {   margin: 10px;  color: White; } .song-links a, .song-links { font-size: 8px; text-decoration: none; font-weight: normal; text-shadow: none; color:
  #fff;} .song-bg {font-weight: normal !important; text-transform:capitalize; box-shadow: 0px 0px 1px 1px #ee9955; border-radius: 8px; margin-top: 4px; margin-bottom: 4px; padding: 8px; color: #ffffff; text-shadow: 1px 1px 0px #494949;}
  
  .lst-bg {font-weight: normal !important; text-transform:capitalize; box-shadow: 0px 0px 1px 1px #ee9955; border-radius: 8px; margin-top: 0px; margin-bottom: 10px; width: 35px; color: #ffffff; text-shadow: 1px 1px 0px #494949;} .lstnrs {font-weight: normal; margin-top: -13px; text-align: center; float: left; margin-left: 5px; width: 35px; color:
  #ffffff; text-shadow: 1px 1px 0px #494949;
  
  &lt;/style&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://literecords.com/drop.js"&gt;&lt;/script&gt; &lt;title&gt;Radio Server is Offline&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;div class="radio-content"&gt; &lt;div class="lst-bg"&gt;&lt;img src="off.png" /&gt;&lt;/div&gt; &lt;div class="header-font"&gt;Lite Radio&lt;/div&gt; &lt;div class="song-bg"&gt;We are down for maintenance.&lt;br /&gt;Check back soon!&lt;/div&gt; &lt;/div&gt; &lt;center&gt;&lt;table border="0" cellspacing="0" cellpadding="0" style="display: none;"&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;';
  
  }
  
  ?&gt;
  </code></pre>