CODEWITHSUNDEEP
htmlcssimage
Peter
Peter

Reputation: 71

multiple background colors for an image

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.

example of the look I am trying to achieve

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:

 <a href="http://www.domain.com/bounty.html"><span class="borderlist"><img src="images/bounty.png" alt="BOUNTY" title=" BOUNTY " width="225" height="155"></span><br>BOUNTY </a>

Upvotes: 0

Views: 283

Answers (5)

Joseph Marikle
Joseph Marikle

Reputation: 78580

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;

}
<a href="http://www.domain.com/bounty.html"><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 </a>

Upvotes: 0

Towkir
Towkir

Reputation: 4014

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

Upvotes: 0

Trevor Nestman
Trevor Nestman

Reputation: 2526

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>

Upvotes: 1

spencer.sm
spencer.sm

Reputation: 20614

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.sstatic.net/eLzG5.png');
  background-size: contain;
  background-repeat: no-repeat;
}
<div></div>

Upvotes: 0

Dave Cripps
Dave Cripps

Reputation: 929

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>

Upvotes: 0

Related Questions