I am trying to create sprites but it isn't working
<p>I have a css file with </p>

<pre><code>#carouselapis1 {
    background: url('www.apis-iq.com/wp-content/uploads/2016/10/carousel-apis-software.png') 0 0;
    width: 177px;
    height: 155px;
}
.carouselapis2 {
        background: url('www.apis-iq.com/wp-content/uploads/2016/10/carousel-apis-software.png') no-repeat -182 0;
        width: 154px;
        height:155px;
}
</code></pre>

<p>and so on. 
and the code i am pasting in to the text of my wordpress page is:</p>

<pre><code>&lt;img class="carouselapis1" src="/wp-content/uploads/2016/10/carousel-forground-no-image.png" alt="carousel-apis-software-saves-time-and-money" width="85" height="155" /&gt;
</code></pre>

<p>whereby the src image is a small blank image. and in the css file the image i want to appear. For some reason though, the image from my css file is not appearing and instead no image shows. 
can someone tell me what i'm doing wrong pls?</p>