multiple background colors for an image - html

Question

What I am looking to achieve is to display an image with a transparent background layer, this image would sit over a background which would have a white border and gray box centred in the image area.
Basically to give the image a partial gray background, then to leave the rest white, to give the appearance of the image to "float" over the gray background as well as allow me to make simple css changes to change the background verses having to redo the images to change the look.
this is the css I have tried:
.borderlist img {
text-align:center;
vertical-align:middle;
background:
linear-gradient
(255,255,255, 0.9),
url('../images/gray.png') no-repeat;
max-width: 100%;
height:auto;
}
And the html:
<span class="borderlist"><img src="images/bounty.png" alt="BOUNTY" title=" BOUNTY " width="225" height="155"></span><br>BOUNTY

Answer 1

I removed the underline from the <a> because it creates a weird underline on the <br>. If you want the text to be underlined, you could throw it in a <span> with a class that tells it to have it. but this is what I got. Let me know if you're needing it to do something different.
.overflowing-img {
display: inline-block;
text-align: center;
text-decoration: none;
}
.undrline {
text-decoration: underline;
}
.borderlist {
text-align: center;
}
.borderlist img {
text-align:center;
vertical-align:middle;
background-image: linear-gradient(rgba(160,160,160, 0.5), rgba(160,160,160, 0.5));
background-repeat: no-repeat;
background-size: 80% auto;
background-position: center center;
}
<a href="http://www.domain.com/bounty.html" class="overflowing-img">
<span class="borderlist">
<img src="http://pngimg.com/upload/gift_PNG5950.png" alt="BOUNTY" title=" BOUNTY " width="225" height="155">
</span>
<br>
<span class="undrline">BOUNTY<span>
</a>

Answer 2

I used a different image, but is this what you are attempting to achieve?
.borderlist img {
width: 200;
height: 100;
}
.borderlist {
width: 225px;
height: 125px;
text-align: center;
vertical-align: middle;
background: linear-gradient(to bottom, #c8c8c8, #ffffff);
margin: auto;
}
.whiteBorder {
width: 255px;
height: 155px;
background-color: #ffffff;
text-align: center;
}
<div class="whiteBorder">
<div class="borderlist">
<a href="http://www.domain.com/bounty.html">
<img src="http://en.wikipedia.org/static/images/project-logos/enwiki.png" alt="BOUNTY" title="BOUNTY">
<br>BOUNTY</a>
</div>
</div>

Answer 3

Try doing using :before in your css to overlay the image on top of a div.
div{
width: 200px; height: 200px;
background-color: lightgray;
box-sizing: border-box;
border: 20px solid white;
position: relative;
}
div:before{
content: "";
display: block;
margin: -20px;
width: 200px;
height: 200px;
background-image: url('https://i.stack.imgur.com/eLzG5.png');
background-size: contain;
background-repeat: no-repeat;
}
<div></div>

Answer 4

Lets go very simple first:
You can't move the image to left by changing css though
.borderlist {
background: grey;
border: 60px solid white;
box-sizing: border-box;
width: 260px;
}
<div class="borderlist">
<img src="https://s9.postimg.org/d0odjmlcv/dwa.png" height="100px" width="150px" />
</div>
You can do this too, create a container div, inside, create the grey div, then float the image above the grey div, like this (I think this is the best):
.borderlist {
padding: 5%;
background: white;
width: 160px;
height: 120px;
position: relative;
}
.grey {
position: absolute;
background: grey;
width: 130px;
height: 90px;
margin: 10px;
}
.float {
position: absolute;
}
<div class="borderlist">
<div class="grey">
</div>
<img class="float" src="https://s9.postimg.org/d0odjmlcv/dwa.png" height="100px" width="150px" />
</div>
Feel free to change and play around to understand it properly

Answer 5

If you're OK with using a mask (white colored background covering the edges), you could use multiple backgrounds coupled with a background color. (credit to user Dave Cripps for the demo image that I shamelessly stole from his demo for mine.)
a {
text-align:center;
display:inline-block;
}
.borderlist {
display:inline-block;
text-align:center;
vertical-align:middle;
background:
linear-gradient(to right, white 15%, transparent 15%, transparent 85%, white 85%), linear-gradient(to bottom, white 15%, transparent 15%, transparent 85%, white 85%);
background-color: #eee;
transition: background-color 0.4s;
}
a:hover .borderlist {
background-color: #5C5;
}
.borderlist img {
height:auto;
}
<span class="borderlist"><img src="http://en.wikipedia.org/static/images/project-logos/enwiki.png " alt="BOUNTY" title=" BOUNTY " width="225" height="155"></span><br>BOUNTY