How to adjust Background to fit inside container without cutting anything?

Question

I have a Pattern that is repeated in both X and Y that I want to use as background in a div, but I’d like it to fit within the div without cutting on the sides as in the image. (I want them to have only entire stars in the background). I wanted the background fits in such a way that it does not cut pieces of the star and is composed only of whole figures.

The intention is that the background repeat and fit inside the container, but without cutting the ends, see the signs in red

Is there any way to control how the background repeats inside the container to avoid some piece getting cut?
(container size is not fixed, height and width may vary)

.x {
    width: 200px;
    height: 200px;
    margin-right: 10px;
    font-size: 3rem;
    color: red;
    background-image: url(https://cdn0.iconfinder.com/data/icons/Toolbar_Icon_Set_by_shlyapnikova/32/star.png);
}

<div class="x"></div>

Imagery: https://cdn0.iconfinder.com/data/icons/Toolbar_Icon_Set_by_shlyapnikova/32/star.png

Answer 1

Option round of property background-repeat:

The option round makes a minimal distortion on the background image so that it fits as well as possible to not cut the image.

div {
    background-image: url(https://i.stack.imgur.com/zrv4v.png);
    background-repeat:round;

    /* daqui pra baixo é só para facilitar a demonstração */
    resize:both; overflow:auto; width:60%; padding: 20px;
}

<div>
Varie o tamanho da<br>
div arrastando pelo cantinho para testar!
</div>

It is a well supported property:

https://caniuse.com/#feat=background-repeat-round-space

Originally, I had gone this way:

You can create with CSS an element like a Letter Seal?

See applied in a div:

div {
    border:1px solid transparent;
    border-image:url(https://i.stack.imgur.com/zrv4v.png) 1 1 1 1 fill round;

    /* daqui pra baixo é só para facilitar a demonstração */
    resize:both; overflow:auto; width:60%; padding: 20px;
}

<div>
Varie o tamanho da<br>
div para testar!
</div>

After a chat with the author of the question, we arrive at the top solution, which is the most appropriate. This second is suitable in cases involving texture on both edge and background.