•  25-06-2023
  •  | 
  •  

Question

I would like to use sprites for a set of icons i'd like to display on a website. When using the code below only the sprites are not appearing, however the generator that I used stated this is the proper css format for displaying sprites image. 

<html>
<style>
    #sprite{
    background: url(sprites.png) no-repeat top left;
}

.sprite-clock{ background-position: 0 0; width: 40px; height: 40px; display: block;  } 
.sprite-paintcan{ background-position: 0 -90px; width: 40px; height: 40px; display: block; } 
.sprite-swatches{ background-position: 0 -180px; width: 40px; height: 40px; display: block;  } 
.sprite-trophy{ background-position: 0 -270px; width: 40px; height: 40px; display: block;  }
</style>

<body>

<div id="sprite">

<div class="sprite-clock"><h3>Management</h3><p>Paullum deliquit, ponderibus modulisque suis ratio utitur.</p></div>

    <div class="sprite-paintcan">
    <h3>Professional</h3>
    <p>Paullum deliquit, ponderibus modulisque suis ratio utitur.</p>
    </div>

    <div class="sprite-swatches">
    <h3>Creativity</h3>
    <p>Paullum deliquit, ponderibus modulisque suis ratio utitur.</p>
    </div>

    <div class="sprite-trophy">
    <h3>Innovation</h3>
    <p>Paullum deliquit, ponderibus modulisque suis ratio utitur.</p>
    </div>
</div><!-- sprite-->

</body>
</html>
Was it helpful?

Solution

The background property is not inherited to an elements children. So write it to each sprite class

sprite-clock{
    background: url(sprites.png) no-repeat top left;
    background-position: ....

OTHER TIPS

Try adding background-url for all that classes

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top