CSS how to deal with a lot of sprite without having to create a new css class


Tags: html,css,css-sprites

Problem :

I have a list of image (around 30) and I want to create CSS sprite so that they are colored when hovered. The images all have the same size. The problem is that if I just want to have one css class, I have to put the background-image on the inline html like this :

CSS:

.sprite{
    background-position: 0 0;
    width: 185px;
    height: 100px;
}

.sprite:hover{
    background-position: 185px 0;
}

HTML:

<div class="sprite" style="background: url('image1');">
<div class="sprite" style="background: url('image2');">
<div class="sprite" style="background: url('image3');">
...

And it does not work. I only manage to do the sprite if I put the background image on the css but if I do this, I would have to create as many CSS classes as I have images which is not elegant at all. Do you have a better idea? (PS: I'm using Less CSS)



Solution :

The Problem is that you overwrite all background attributes inline (incl. -position); use:

style="background-image: url('image1');"

    CSS Howto..

    How to build a CSS style with a LESS mixin parameter?

    css resize: How to resize a dynamic growing div after max height is active

    Using Susy, how can I make a div expand to height of tallest sibling?

    How to make a GWT-like CaptionPanel manually

    How to delete css right or bottom on drag

    SMACSS and BEM: How to position Module inside of a Module?

    How to achieve this layout with CSS?

    How to have two sections using 50% of the total height?

    How can I target CSS to a particular sharepoint Page Layout file?

    How to change CSS color values in real-time off a javascript slider?

    How to style a SVG using CSS in javaFX FXML

    How do I get text to overlay on top of an image in Dreamweaver?

    How to implement two sets of CSS Tabs on one page?

    How to disable button using jquery in materialize css

    How to make a CSS table with use of DIV UL LI

    Show content on and off with Javascript

    how to apply stylesheet to wp frontend, via plugin i created?

    How to visually indicate current page in ASP.NET MVC?

    How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)

    How to override Zurb Foundation css properties using rails 3.1?

    How to make table borders invisible with CSS

    How to select only some children in CSS?

    how to center background image in window resize

    how to select a class which is children of many elements

    how to target individual elements in grails g:render

    How do I make the text in the next line to be centered and not aligned to the left?

    How to make links look like tabs using html/css?

    CSS Cascading takes over inheritance, how to solve this?

    css how to make an elements margin-bottom go to bottom of its container

    How to animate an icon for with CSS?