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

Navigation
2

I have a pattern that repeats in both X and Y that I want to use as background in a div , but I would like it to fall within div as shown in the image. (I want you to have only full stars in the background) . I wanted the% w_ of% to be adjusted so as not to cut pieces of the stars, being made up only of whole figures.

Isthereanywaytocontrolhowthebackgroundrepeatsitselfinsidethecontainertopreventsomepiecesfrombeingcut?
isfixed,canvaryheightandwidth)

.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>

Image: link

    
asked by anonymous 02.10.2018 / 20:30

1 answer

6

Option round of property background-repeat :

The round option makes minimal distortion in the background image so it fits in the best way possible to not crop 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 para testar!
</div>

This is a well-supported property:

  

link


Originally, I had gone this route:

Is it possible to create a Letter Stamp element with a CSS?

See applied in 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 conversation with the questioner in the chat, we come to the top solution, which is the most appropriate. This second is suitable in cases involving texture both on the edge and the bottom.

    
02.10.2018 / 20:51
Remove item from a collection How to calculate difference of dates that are a previous row with MYSQL?