CODEWITHSUNDEEP
javascriptjquerycss
z_av
z_av

Reputation: 83

Separating css image properties

I have 4 images of an arrow I would like to add to a CSS class (up, down, right, left).

I created a basic arrow css class:

.arrow {
    background-repeat: no-repeat;
    background-position: center;
}

and then created subclasses e.g:

.arrow .up {
    background-image: url("../img/arrow-up.png");
}
arrow .down {
    background-image: url("../img/arrow-down.png");
}

When I add both classes to a table cell (with jQuery) it doesn't show the image. The thing is that if I combine them into 1 class, e.g.

.arrow-up {
    background-image: url("../img/arrow-up.png");
    background-repeat: no-repeat;
    background-position: center;
}

and then add it to the table cell it works just fine.

How can I avoid repeating the "background-repeat" and "background-position" in every class?

Upvotes: 0

Views: 86

Answers (1)

fearmear
fearmear

Reputation: 539

The correct code will be:

.arrow {
    background-repeat: no-repeat;
    background-position: center;
}
.arrow.up {
    background-image: url("../img/arrow-up.png");
}
.arrow.down {
    background-image: url("../img/arrow-down.png");
}

<td class="arrow up">
 Content
</td>

Upvotes: 1

Related Questions