Этот код не должен вызывать обрезание фонового изображения. Это, однако, исказит изображение, которое может быть нежелательным.
Возможно, вы захотите добавить некоторые отступы, чтобы текст находился внутри черты bru sh.
padding: 5px 20px;
Или что-то в этом роде.
Я проверил это как следует, и, кажется, работает:
* {
font-size: 30px;
}
span {
background: url('https://www.onlygfx.com/wp-content/uploads/2017/04/grunge-brush-stroke-banner-2-17.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 5px 20px 10px 20px;
margin: 0;
color: white;
}
<p>
This is a <span> Test </span>
</p>