How to make the background image react without losing proportions

Question

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

With a fixed size along the way:

and mobile also works great.

but does not respond:

With dynamic size it reacts, but does not follow the path:

Modified 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 bit complicated and requires a fixed aspect ratio of the background image.

1. Make everything responsive.

First of all, this will not work if everything is %-based , but the car is px-based (because if you change the size of your window, everything will become smaller, but the car will remain the same), so for beginners you will have to change the size of your car by a percentage .

2. Correct aspect ratio.

Then you need to correct the aspect ratio using a combination of absolute and relative positions and gaskets .

In your case, your CSS cover would look something like this:

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

(background image 980x1366px)

Demo

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

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

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

Hope this helps!

Answer 2

Try replacing the height and width in the #main css class with:

 #main{ height: 100%; width: 100%; background: url("http://i.imgur.com/G4gs6EG.png") no-repeat fixed center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

I have work on codepen.io

http://codepen.io/NosNits/pen/RRqzPy