css-sprite-loader/example/style.css

A webpack loader to convert png into sprite image

body {
    margin: 0;
}

.part {
    display: inline-block;
    width: 50%;
    font-family: Rockwell;
    color: #565b61;
}

.source, .sprite {
    border: 1px dashed #dfe4ec;
}

.source.retina2x {
    width: 128px;
    height: 128px;
    background: url('../test/fixtures/images/retina/angry-birds@2x.png');
    background-size: 100%;
}
.sprite.retina2x {
    width: 128px;
    height: 128px;
    background: url('../test/fixtures/images/retina/angry-birds@2x.png?sprite&retina@1x');
}

.source.retina-2 {
    width: 128px;
    height: 128px;
    background: url('../test/fixtures/images/retina/captain-america@2x.png') no-repeat;
    background-size: 80%;
    background-position: 30px 20px;
}
.sprite.retina-2 {
    width: 128px;
    height: 128px;
    background: url('../test/fixtures/images/retina/captain-america.png?sprite&retina') no-repeat;
    background-size: 80%;
    background-position: 30px 20px;
}

.source.bg-position-outside {
    width: 128px;
    height: 128px;
    background: url('../test/fixtures/images/tag.png') no-repeat;
    background-position: 30px -20px;
}
.sprite.bg-position-outside {
    width: 128px;
    height: 128px;
    background: url('../test/fixtures/images/tag.png?sprite') no-repeat;
    background-position: 30px -20px;
}

.source.bg-position-and-size-outside {
    width: 200px;
    height: 128px;
    background: url('../test/fixtures/images/html.png') no-repeat;
    background-size: 200px 100px;
    background-position: 30px 20px;
}
.sprite.bg-position-and-size-outside {
    width: 200px;
    height: 128px;
    background: url('../test/fixtures/images/html.png?sprite') no-repeat;
    background-size: 200px 100px;
    background-position: 30px 20px;
}