css-sprite-loader/test/cases/background/style.css

A webpack loader to convert png into sprite image

body {
    margin: 0;
}

.part {
    display: inline-block;
    width: 50%;
}

.source.simple {
    width: 128px;
    height: 128px;
    background: url('../../fixtures/images/home.png') no-repeat;
}
.sprite.simple {
    width: 128px;
    height: 128px;
    background: url('../../fixtures/images/home.png?sprite') no-repeat;
}

.source.background-image {
    width: 128px;
    height: 128px;
    background-image: url('../../fixtures/images/home.png');
}
.sprite.background-image {
    width: 128px;
    height: 128px;
    background-image: url('../../fixtures/images/home.png?sprite');
}

.source.with-color {
    width: 128px;
    height: 128px;
    background: #eee url('../../fixtures/images/home.png');
}
.sprite.with-color {
    width: 128px;
    height: 128px;
    background: #eee url('../../fixtures/images/home.png?sprite');
}

.source.with-color-outside {
    width: 128px;
    height: 128px;
    background: url('../../fixtures/images/home.png');
    background-color: #eee;
}
.sprite.with-color-outside {
    width: 128px;
    height: 128px;
    background: url('../../fixtures/images/home.png?sprite');
    background-color: #eee;
}

.source.with-color-override {
    width: 128px;
    height: 128px;
    background-color: #eee;
    background: url('../../fixtures/images/home.png');
}
.sprite.with-color-override {
    width: 128px;
    height: 128px;
    background-color: #eee;
    background: url('../../fixtures/images/home.png?sprite');
}

.source.bg-size {
    width: 100px;
    height: 100px;
    background-image: url('../../fixtures/images/lollipop.png');
    background-repeat: no-repeat;
    background-size: 100%;
}
.sprite.bg-size {
    width: 100px;
    height: 100px;
    background-image: url('../../fixtures/images/lollipop.png?sprite');
    background-repeat: no-repeat;
    background-size: 100%;
}

.source.bg-size-pixel {
    width: 100px;
    height: 100px;
    background-image: url('../../fixtures/images/lollipop.png');
    background-repeat: no-repeat;
    background-size: 80px;
}
.sprite.bg-size-pixel {
    width: 100px;
    height: 100px;
    background-image: url('../../fixtures/images/lollipop.png?sprite');
    background-repeat: no-repeat;
    background-size: 80px;
}

.source.bg-size-height {
    width: 100px;
    height: 150px;
    background-image: url('../../fixtures/images/lollipop.png');
    background-repeat: no-repeat;
    background-size: auto 120px;
}
.sprite.bg-size-height {
    width: 100px;
    height: 150px;
    background-image: url('../../fixtures/images/lollipop.png?sprite');
    background-repeat: no-repeat;
    background-size: auto 120px;
}

.source.bg-size-cover {
    width: 100px;
    height: 150px;
    background-image: url('../../fixtures/images/lollipop.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.sprite.bg-size-cover {
    width: 100px;
    height: 150px;
    background-image: url('../../fixtures/images/lollipop.png?sprite');
    background-repeat: no-repeat;
    background-size: cover;
}

.source.bg-size-contain {
    width: 100px;
    height: 100px;
    background-image: url('../../fixtures/images/lollipop.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.sprite.bg-size-contain {
    width: 100px;
    height: 100px;
    background-image: url('../../fixtures/images/lollipop.png?sprite');
    background-repeat: no-repeat;
    background-size: contain;
}

.source.bg-size-override {
    width: 100px;
    height: 150px;
    background-size: 100%;
    background: url('../../fixtures/images/lollipop.png') no-repeat;
}
.sprite.bg-size-override {
    width: 100px;
    height: 150px;
    background-size: 100%;
    background: url('../../fixtures/images/lollipop.png?sprite') no-repeat;
}

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

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

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

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

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