title: Responsive css background images
body: <p>I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.</p>
  
  <p>Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course</p>
  
  <p>link: <a href="http://www.g-floors.eu" rel="noreferrer">g-floors.eu</a></p>
  
  <p>Code I have so far (content part)</p>
  
  <pre class="lang-css prettyprint-override"><code>#content {
    background-image: url('../images/bg.png');
    background-repeat: no-repeat;
    position: relative;
    width: 85%;
    height: 610px;
    margin-left: auto;
    margin-right: auto;
  }
  </code></pre>