CODEWITHSUNDEEP
htmlcss
cmonti
cmonti

Reputation: 187

Css Improve style

How can I improve these css to not repeat the background-position? Can I add something inside each of the icons to refer to another class that add the background-position?

.icon-add-item {
    background-image: url("../../../images/Reports/icon_addItem.png");
    background-position: 50%;
}

.icon-remove-item {
    background-image: url("../../../images/Reports/icon_removeItem.png");
    background-position: 50%;
}

.icon-dragdrop-item {
    background-image: url("../../../images/Reports/icon_layout1_dragDrop.png");
    background-position: 50%;
}

.icon-filter-column {
    background-image: url("../../../images/Reports/icon_layout1_filter.png");
    background-position: 50%;
}

Upvotes: 1

Views: 28

Answers (1)

Ben Fried
Ben Fried

Reputation: 2204

Specify the common CSS rule for all of those classes at once, rather than defining it for each like so:

.icon-add-item {
    background-image: url("../../../images/Reports/icon_addItem.png");
}

.icon-remove-item {
    background-image: url("../../../images/Reports/icon_removeItem.png");
}

.icon-dragdrop-item {
    background-image: url("../../../images/Reports/icon_layout1_dragDrop.png");
}

.icon-filter-column {
    background-image: url("../../../images/Reports/icon_layout1_filter.png");
}

.icon-add-item, .icon-remove-item, .icon-dragdrop-item, .icon-filter-column {
    background-position: 50%;
}

Upvotes: 1

Related Questions