I am trying to make the background image and SVG responsive. I have got them both in a container,where both are responsive from their own perspectives. But When I test it by Stretching the browser in and out,the SVG gets displaced. I need to fix the SVG overlays over the background image,where they will be settled at the position of the image I have set them.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background: url(http://i.imgur.com/b1K76Pf.jpg) no-repeat;
background-size: contain;
max-width: 960px;
height: 565px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="main-roof">
<svg width="100%" height="100%" viewbox="0 0 1200 180"
preserveAspectRatio="none">
<polygon fill="red" points="115,103 643,93 930,47 372,72">
</polygon>
<polygon fill="red" points="30,120 170,112 649,105 513,118 ">
</polygon>
<polygon fill="red" points="610,49 642,57 600,56 576,57">
</polygon>
</svg>
</div>
</div>
</body>
</html>P.S. I have tried the .container with width and height of % and auto,but in that case,the image just doesn't show up.