<h1>Responsive with image-set and srcset</h1>

<h2>CSS background image with image-set</h2>

<div class="box box--decorated">
  <h2>Decorated box with background image</h2>
  <p>some content</p>
</div>

<h2>Image element with srcset attribute</h2>

<img
  src="https://assets.codepen.io/2332100/large-landscape-2048x1536.jpg"
  srcset="https://assets.codepen.io/2332100/small-landscape-750x536.jpg 750w,
          https://assets.codepen.io/2332100/large-landscape-2048x1536.jpg 20480w"
  width="2048"
  height="1536"
  alt="landscape"
>
img {
  max-width: 100%;
  height: auto;
}

.box {
  background: skyblue;
  background-image: url("https://assets.codepen.io/2332100/small-landscape-750x536.jpg");
  background-image: -webkit-image-set(
    url("https://assets.codepen.io/2332100/small-landscape-750x536.jpg") 1x,
    url("https://assets.codepen.io/2332100/large-landscape-2048x1536.jpg") 2x);
  background-image: image-set(
    url("https://assets.codepen.io/2332100/small-landscape-750x536.jpg") 1x,
    url("https://assets.codepen.io/2332100/large-landscape-2048x1536.jpg") 2x);
  background-image: image-set(
    url("https://assets.codepen.io/2332100/small-landscape-750x536.jpg") 750w,
    url("https://assets.codepen.io/2332100/large-landscape-2048x1536.jpg") 20480w);
}

.box--decorated {
  color: white;
  border: solid 2px skyblue;
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.