Luiz Carvalho Luiz Carvalho - 3 months ago 13
HTML Question

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

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:

enter image description here
and mobile works fine too

enter image description here

but, not is responsive:

enter image description here

With dynamic size is responsive, but not follow path:

enter image description here
enter image description here

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

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!