Struggling to find a solution for a seemingly simple problem. I am looking to create responsive/fluid images that scale relative to the viewport size. I also need to load them using CSS with the background property for selective loading of different versions using media queries. How can I achieve both of these requirements?
edit:
Below is the code example. The image is currently not displaying, possibly due to the lack of fixed width or height in the parent element (other than width: 100%). However, the parent element must also be 100% width to maintain responsive scaling. The image itself is sized at 400px x 400px.
HTML
<div class="why-us"></div>
CSS
.why-us {
background: url(../lemonsevens/img/img_2x.png);
background-size: 100%;
background-repeat: no-repeat;
}