Responsive css background images

Question

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.

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

Code I have so far (content part)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}