Databases
StackOverflow2013
Postsdbo
POdiv background-image url as string
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdiv background-image url as string
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload