Tenho uma pattern que se repete tanto em X quanto em Y que quero usar como background
em uma div
, mas gostaria que ele coube-se dentro da div
sem cortar nas laterais como está na imagem. (quero que tenham apenas estrelas inteiras no background). Queria que o background
se ajusta-se de forma a não cortar pedaços das estrela, ficando composto apenas por figuras inteiras.
O intenção é que o background
se repita e encaixe dentro do container, mas sem cortar as extremidades, veja as sinalizações em vermelho
Existe alguma forma de controlar como o background se repete dentro do container para evitar que algum pedaço fique cortado?
(o camanho do container não é fixo, pode variar altura e largura)
.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>
Imagem: https://cdn0.iconfinder.com/data/icons/Toolbar_Icon_Set_by_shlyapnikova/32/star.png