title: Correct usage of PHP library - GeoPattern
body: <p>I needed random patterns as background images for my site. I found this awesome php library known as <a href="https://github.com/redeyeventures/geopattern-php" rel="nofollow">geopattern</a>. Here are some <a href="https://github.com/explore" rel="nofollow">beautiful examples</a>. The usage seemed pretty straightforward so I set up a test. Here is the code in my test.php.</p>
  
  <pre><code>require_once('geopattern_loader.php');
  $geopattern = new \RedeyeVentures\GeoPattern\GeoPattern();
  $geopattern-&gt;setString('Mastering Markdown');
  $geopattern-&gt;setBaseColor('#54ff9f');
  $geopattern-&gt;setColor('#ffff00');
  $geopattern-&gt;setGenerator('sine_waves');
  $svg = $geopattern-&gt;toSVG();
  $base64 = $geopattern-&gt;toBase64();
  $dataURL = $geopattern-&gt;toDataURL();
  </code></pre>
  
  <p>I am trying to display a pattern with a code below. But somehow I am not able to get the image to display in the frontend. </p>
  
  <pre><code>echo '&lt;div style="background-size: 400px 400px; height: 400px; width: 400px; background-image: '.$dataURL.';"&gt;&lt;/div&gt;';
  </code></pre>
  
  <hr>
  
  <p>Here is what it looks like in the <a href="http://pastebin.com/1S2fxaBS" rel="nofollow">view-source</a> and Here is <a href="http://pastebin.com/XYzcZb20" rel="nofollow">link to result of</a> <code>echo $dataURL</code>. You may notice that the string is unusually long. Please tell me what I am doing wrong.</p>
  
  <hr>
  
  <p><strong>UPDATE</strong> : Here is what my html and css looks like.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;
  &lt;head&gt;&lt;meta content="text/html; charset=UTF-8" http-equiv="content-type"&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;?php echo '&lt;div style="background-size: 400px 400px; height: 400px; width: 400px; background-image: '.$dataURL.';"&gt;&lt;/div&gt;'; ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Here is how it looks in the firebug css console.</p>
  
  <pre><code>element.style {
      background-image: url("");
      background-size: 400px 400px;
      height: 400px;
      width: 400px;
  }
  </code></pre>