Argthtjtr

this is what I have:

.slot {

  border: 1px solid;

  border-color: rgba(90, 90, 90, 1);

  height: 31px;

  background: url(https://i.imgur.com/r6ihXJe.png), rgba(150, 150, 150, 1);

  background-position-x: center !important;

  background-repeat: repeat-y, no-repeat !important;

}

<div class="slot" style="width:345px; background-size: 62px, auto;"></div>

This is the result:

slot with bg image

Now the issue comes when the background-size property changes to more than 62px. For example when it becomes 63px and more - the background image disappears:

slot with no bg image

Interesting that if we increase the height of the div then we can have a bigger background-size and still see the background image.

Here is a jsFiddle I made: https://jsfiddle.net/avc4y3h0/

Please help!

Edit: It seems that I can reproduce this issue only on Google Chrome, Avast Browser and Opera. It works fine on Mozilla Firefox and Microsoft Edge. Can not check on Safari. Also I have the feeling that this was working before on Chrome and it is probably something recent? But I can't tell for sure.

What actually is happening - you are stretching one pixel image to 63px, and stretching at such scale is causing it to disappear as browser is not able to do that operation.

This is browser specific implementation, if you check on Firefox, it is will work fine and on chrome it is not working.

You can accomplish the same - by using same image as background(repeat x and y both) of .slot's child(set height, width and margin for this child)

So here is my take.

You are giving background height 62px(you have given auto but it will be same as the width because it is a square image) and height of the div as 31px. Means, your background height is twice the height of the element) and you have given repeat-y for the background.

This might be a side effect in CSS3. which is,

If the background image is twice the height(or width) of the element and it is repeating in the y-direction(or x), then the background will not be shown.

I don't think there is any specific logic that was applied during design(CSS feature) to make it work like this.

The solution for your current scenario will be,

1. Know that auto given in background is actually equal to the width and accordingly make sure that background-height is less than twice the height of the element

or

2. Use no-repeat if that serves your use-case

Solution #1: (Thanks to the comment of Temani Afif)

Should use 100% instead of auto in the background-size property for value of y:

background-size: 63px 100%;

Solution #2:

I came up to this idea thanks to vishwaovi answer.

We can use a background image that is a line of 1 x 31 pixels (or other fixed height) instead of just single pixel.

Then we can set the background-size with fixed height for the y:

background-size: 63px 31px;

And the background-repeat property needs to be set to no-repeat:

background-repeat: no-repeat;

This one works too for me but obviously the first solution with just setting the value for y to 100% is more simple.