Muti img fixed

by Zsanett Tamás

HTML

<div></div>
<p>Lorem Ipsum</p>
<div></div>
<div></div>
<p>Lorem Ipsum</p>
<div></div>
<div></div>
<p>Lorem Ipsum</p>
<div></div>
<div></div>
<p>Lorem Ipsum</p>
<div></div>
<div></div>
<p>Lorem Ipsum</p>
<div></div>

CSS

div {
   height: 400px;
   border: 1px solid green;
   background-image: url(http://lorempixel.com/970/540);
   background-size: 220% 100%;
   background-attachment: initial;
   background-position: center center;
   background-repeat: no-repeat;
   margin: 2rem 0;
 }

 p {
   background: #FFF;
   padding: 3em;
   margin: 0;
 }


 @media (min-width: 480px) {
   div {
     background-attachment: fixed;
   }
 }