My question involves a DIV element with a specific style applied to it.
.vplayer-container .logo
{
position: absolute;
bottom: 50px;
right: 10px;
background: url(../img/logo.png) no-repeat;
border: 1px solid #000000;
max-width: 50px;
max-height: 50px;
}
I am looking for a way to make the size of the DIV match the background image automatically, as the background image may change. I would prefer a CSS solution over using JavaScript for this purpose.
The target browsers are HTML5 compatible, including Firefox, Webkit, and Opera.
Thank you!
Answer:
Based on a suggestion from Kyle Sevenoaks, one approach is to add an image element inside the DIV.
<div>
<img src="url">
</div>
This method eliminates the need for the Background property and any additional styling.