1

I want to add an Background image on the <img> attribute. I want to show the tick image center of the twitter image. But, the tick image or background-image is doesn't show in here.

img{
  background-image:url(https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg);
  background-repeat:no-repeat;
  background-size:20%;
  background-position:center center;
}
<img src="https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png"  />
acoder
  • 739
  • 5
  • 19
  • Possible duplicate of [CSS background image on top of ](https://stackoverflow.com/questions/28710659/css-background-image-on-top-of-img) – sol Nov 09 '17 at 17:09
  • I can't find my answer from there. @ovokuro – acoder Nov 09 '17 at 17:14
  • Quentin's answer below explains exactly why your code isn't working. If you can't / don't want to edit the image, then you will need to overlay the tick using a method from the question I linked – sol Nov 09 '17 at 17:20

3 Answers3

1

The centre of the twitter image that you are using is white.

A background image will only show through areas of an image that are transparent.

You would need to edit the image to change those pixels to transparent.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

If you need a custom checkbox ensure the following:

  • Need at least one checkbox and one label
  • Place checkbox before the label
  • The checkbox should have display:none
  • The label should have for={Id of checkbox}
  • If the label is the next thing after checkbox, then your checked style should look something like: ex. chx:checked + label {...
  • If the label and checkbox are on the same level but not next to each other: ex. chx:checked ~ label {...
  • Those are the two most common layouts but not the only ones.

Demo

.chx {
  display: none
}

.label {
  display: block;
  background-image: url(https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
}

img {
  display: none
}

.chx:checked+.label img {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}
<input id='chx' class='chx' type='checkbox'>


<label class='label' for='chx'><img src='https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg' width='50'></label>
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
0

The problem you are having is that the twitter logo has a white background so you can't see the tick behind it.

It's also impossible with just one img element to get the background-image on top of the content. You need to introduce another element like a div like so:

I have decreased the size of the tick so you can still see that the twitter icon is there

.test {
  display: inline-block;
  position: relative;
}

.test:after {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center center;
  background-image: url('https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg');
}
<div class="test">
  <img src="https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png" />
</div>
A Friend
  • 1,420
  • 17
  • 22