Force div's background-image fetch it's size - html

Question

I've got a div which absolutely needs an auto width that depends on text length inside it. I want a blue halo showing off as background image of that button when I hover it with my mouse.
But here's the challenge I can't solve: I want that blue halo png image to fetch the exact width of the div, I want a real distortion of the halo image without respecting any proportion.
How can I accomplish this without giving an absolute value for the width of the div? And without using anything more than HTML and CSS3?
HTML side:
<div class="button">
<p>Hover here!</p>
</div>
CSS side:
.button {
width: auto;
height: 80px;
line-height: 81px;
font-family: sans-serif;
display: inline-block;
}
.button:hover {
background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat;
}
JSFiddle: https://jsfiddle.net/ynwsmkrz/5/

Answer 1

Everything you have to do is add a background-size: cover; to the .button:hover like this:
CSS:
.button {
width: auto;
height: 80px;
line-height: 81px;
font-family: sans-serif;
display: inline-block;
}
.button:hover {
background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat;
background-size: cover;
}
It makes the background image cover the whole div, without cropping it. Hopefully my answer was helpful!