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

link: g-floors.eu

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;
}

Answer 1

Try this :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

Answer 2

by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Answer 3

Just two lines of code, it works.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

Answer 4

CSS:

background-size: 100%;

That should do the trick! :)

Answer 5

Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

---

More complicated method:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

---

Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content