JSFiddle - React, Tailwind, and code Playground

HTML

<div class="icon smaller">test1</div>
<div class="icon bigger">test1</div>

CSS

.icon
{
	font-size: 2em;
	text-align: center;
	line-height: 3em;
	border: 2px solid #666;
	border-radius: 7px;
    position: relative;
	overflow: hidden;
}

.icon:before
{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
    left: 0%;
    top: 0%;
	z-index: -1;
	background: url(http://blogs.sitepointstatic.com/examples/tech/background-transform/background.png) 0 0 repeat;

    transform: translate(-50%, -50%) scale(1.5, 1.5);
    background-repeat: no-repeat;
    background-size: contain;
}

.smaller{
    float:left;
    width: 120px;
    height: 120px;
}

.bigger{
    float:left;
    width: 200px;
    height: 200px;
}