CODEWITHSUNDEEP
css
Božo Stojković
Božo Stojković

Reputation: 2943

CSS ::after background not displaying

I'm trying to make a tick image display after div element. I tried several combinations of CSS properties, but I just can't seem to figure out how to do it properly.

Answers to similar questions didn't help me.

HTML:

<div class="link-input-container">
  <input class="link-input" placeholder="Zalijepi link ovdje..." type="text" class="url_input" name="url_input">
</div>

CSS:

.link-input {
  font-family: Courier New;
  font-size: 12px;
}

.link-input-container::after {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat;
}

Fiddle: http://jsfiddle.net/mk3fauk5/

Upvotes: 0

Views: 107

Answers (2)

midda25
midda25

Reputation: 160

Your background image is bigger than the actual div you are adding the ::after element to.

Try adding this in your CSS:

.link-input-container::after {
  display: block;
  content: "";
  width: 64px;
  height: 64px;
  background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat;
  background-size: 100%;
}

You can see it here:

https://jsfiddle.net/jn7cq5c9/

Upvotes: 1

Amin Jafari
Amin Jafari

Reputation: 7207

it was showing the background, the problem was that the size of the background was so big that you'd only see the empty space of it, give your background a size and a position and it'll work: DEMO

.link-input-container::after {
  display: block;
  content: "";
  width: 64px;
  height: 64px;
  background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat;
  background-size:contain;
  background-position:center;
}

Upvotes: 3

Related Questions