Search code examples
htmlcsscss-spritescss-specificity

How to set background-position with sprites?

Hello and Happy New Year:D So here is a problem: I wanna show 6 hot air balloons on page with sprites. Actual sprite containes 6 colored balloons. Lets see the code and result.

HTML:

<div class="hotairballoons">
    <div class="ball-1"></div>
    <div class="ball-2"></div>
    <div class="ball-3"></div>
    <div class="ball-4"></div>
    <div class="ball-5"></div>
    <div class="ball-6"></div>
</div>

CSS:

.hotairballoons > div[class^="ball-"] {
    background: url(../img/sprites.png);
    background-repeat: no-repeat;
    width: 69px;
    height: 110px;
}

.ball-1 {
    background-position: 0px 0px;
}

.ball-2 {
    background-position: -69px 0px;
}

.ball-3 {
    background-position: -138px 0px;
}

.ball-4 {
    background-position: 0px -110px;
}

.ball-5 {
    background-position: -69px -110px;
}

.ball-6 {
    background-position: -138px -110px;
}

Result:

enter image description here

What shows in developer console:

enter image description here

Why is it crossed? What am I doing wrong?

Solution

  • It works fine .

    But if you wanna correct the console you should add !important at the end of each background-position !