PLEASE tell me why my image is repeating. Image size is 900 x 500. Thanks for your attention.
Here is my code:
<div class="item" style="background: #f0f0f0; background-image: linear-gradient(#660066,#CC9900); position: relative;">
<div style="width:100%;height:100%; background: url('{{media url="wysiwyg/affiliates.jpg"}}" alt="" />"}}') 20% center; background-size: cover;"></div>
<div class="slide2-content" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;">
<div class="container" style="height: 100%; position: relative;">
<div class="content-area" style="position: absolute; top: 40%; right: 20%; text-align: left;"><em style="display: block; line-height: 1; color: #fff; font-weight: 300; font-style: normal;">up to <b>ZERO%</b> off!</em>
<h2 style="font-weight: 600; color: #fff; line-height: 1;">HUGE <b style="font-weight: 800;">SALE</b></h2>
<p style="font-weight: 600; color: #fff; line-height: 1;">Fashion<span class="split">-</span>Electronics<span class="split">-</span>Gifts<span class="split">-</span>Music<span class="split">-</span>Sports</p>
<div style="text-align: right;"><a class="btn btn-default" style="border: 0; background-color: #fefefe; color: #777; font-weight: 600;" href="#">SHOP NOW</a></div>
</div>
</div>
</div>
</div>
