How can I make the background image to be responsive without losing the proportions

Question

I am doing an animation with HTML and CSS3 and I need adapt along with the background image. The problem is that the content stay within that div. I put the height and width fixed for this but don’t work. When I try using dynamic proportions (% or auto) and background-size: contain; the animation does not follow the original path.

With fixed size following the path:

and mobile works fine too

but, not is responsive:

With dynamic size is responsive, but not follow path:

Changed code:

 #main{
   position:relative;
-  left: 0;
-  height: 1366px;
-  width: 980px;
+  // left: 0;
+  height: 100%;
+  width: 100%;
   overflow:hidden;
   background: url('../images/bg.png');
   background-repeat: no-repeat;
-
+  background-size: contain;
 }

DEMO

This is my index.html

  <div id="main">
    <div class="participant" style="z-index: 4;">
  <div class="car">
      <img class="photo" src="https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-1/c21.21.259.259/s50x50/529297_568082979888645_1727470385_n.jpg?oh=c75505b8b23ff9abd26be1fd5771f81d&amp;oe=582BAD0F" alt="">
      <img class="sprite" src="http://i.imgur.com/OwYhg9T.png" alt="">
    </div>
  </div>


  </div>

And my animation.css

@charset "utf-8";
/* CSS Document */
body, html {
  height: 100%;
}


body {
  padding:0;
  margin:0;
}

#main{
  position:relative;
  left: 0;
  height: 1366px;
  width: 980px;
  overflow:hidden;
  background: url("http://i.imgur.com/G4gs6EG.png");
  background-repeat: no-repeat;

}



@-moz-keyframes move
{
  from {
    right: -30%;
    top: 8%;
  }

  to {
    right: 140%;
    top: 80%;
  }
}

@-webkit-keyframes move
{
  from {
    right: -30%;
    top: 8%;
  }

  to {
    right: 140%;
    top: 80%;
  }
}

.participant {
  position: absolute;
  display: inline-block;
  height:200px;
  width: 200px;
  right: 140%;
  top: 80%;
  -moz-animation:move 10s  linear infinite;
  -webkit-animation:move 10s  linear  infinite;
}

.sprite{
  width: 100%;
  height: 100%;
}

.photo{
  position: relative;
  top: 128px;
  left: 99px;
  width: 50px;
  height: 50px;
}

Answer 1

This is a little tricky and requires fixed aspect ratio of the background image.

1. Make everything responsive.

First of all, it won't work if everything is %-based but the car is px-based (because if you resize your window everything will get smaller but the car will stay the same), so for starters you are going to have to change the size of your car to percentages.

2. Fix aspect ratio.

Then you need to fix the aspect ratio using mix of absolute and relative positions and paddings.

In your case your wrapper's CSS will look something like:

width: 100%;
padding-bottom: 71.74%; /* 980/1366 = ~ 0.7174 */

(your background image is 980x1366px)

DEMO

3. FUTURE PROOF: Fill the screen on every screen.

Unfortunately you can't do much about white space around your image because of the aspect ratio itself, I'd personally look for a 16:9 image for the background and it will fit most of the desktop/laptop screens perfectly, if you need to cover wide range of screens then you should use media queries with different-sized backgrounds.

Remember to adjust the padding-bottom of your container along with the image itself.

Hope it helps!