JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button special">
    Background image should be scaled to fit in this container
</div>

<p>You should see this entire image above, repeated horizontally:</p>
<img src="http://www.gallery-art.org/wp-content/uploads/2010/10/van-gogh-vincent-starry-night.jpg">

CSS

.button {
    
    background-size: contain; /*not working in Firefox 5*/
    
    display: inline-block;
    margin-bottom: 30px;
    padding: 20px;
    
    font-weight: bold;
    color: white;
    text-shadow: #000 -0px -0px 3px;
}
.button.special {
    background: url("http://www.gallery-art.org/wp-content/uploads/2010/10/van-gogh-vincent-starry-night.jpg") repeat-x left top;
}