malar
malar

Reputation: 67

CSS to display the image wihout using img tag in HTML

I'm new to CSS. I just want to place an image before the chapter title. I have an arrow image and I want to place that image before the chapter name, only using CSS and without using the HTML <img> tag.

My Code:

.body > .ce_label:before{
  background: url("arrow.png");
}
<div id="body-proof" class="body top-most bottom-most">
  <div id="OPT_ID_4224-proof" class="ce_label">
    Chapter<span class="tb"></span>11<span class="te"></span>
  </div>
</div>

I'm not getting the correct output with design. Can anyone help me to fix this?

Upvotes: 0

Views: 69

Answers (2)

Vivekraj K R
Vivekraj K R

Reputation: 2558

Use 'content' property with pseudo elements like before/after and Make sure your image path is correct. check the Fiddle

.body > .ce_label:before {
  content: url(https://s14.postimg.org/zfkdt9wdt/down_arrow.png);
}

Upvotes: 1

Super User
Super User

Reputation: 9642

You can use below css for this

.ce_label:before{
  content: url(arrow.png);
}

Upvotes: 1

Related Questions