CSS：图像仅显示半高，并显示多次宽度？

Question

It seems that my code is repeating the image width ways, and only showing half of it height wise?

 html, body { background-color: black; } .tile.floor { background-image: url('https://i.imgur.com/7es7QMs.png'); } .tile.floor:empty::after { content: "\\200b"; visibility: hidden; }

 <div class="tile floor"></div> <script src="/assets/js/app.js"></script>

I have attached a JS fiddle with all the code I'm using.

JS fiddle

Answer 1

Try setting .tile.floor 's height to the height of the image.

html, body {
    background-color: black;
}

.tile.floor {
    background-image: url('https://i.imgur.com/7es7QMs.png');
    height: 40px;
}

.tile.floor:empty::after {
    content: "\200b";
    visibility: hidden;
}

As per my understanding, it does what you want.

Answer 2

I'm not entirely sure what you're asking for here. But if you want the image to resize to the height of your element, use background-size: contain .

.tile.floor {

    background: url('https://i.imgur.com/7es7QMs.png') no-repeat; /* Remove no-repeat if you want it to tile */
    height: 38px; /* Whatever height you want */
    background-size: contain;
}