CSS to add image to text - html

Question

At the moment, I have page headings which I want to style like this:
<div class="page_header">Categories</div>
My style looks like this:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
}
But I have been asked to add a small image to the left of the text.
So, I could go an edit every page header:
<div class="page_header"><img src="http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png" />Categories</div>
But I was hoping I could edit the CSS to accomplish this for me. Is there a way I can add an image to the CSS, left of the text (With a (missing) gap between the image and the text)?
I have attempted the ::before in the css (New to me, so I am doing something wrong), like this:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
}
.page_header::before{
content: url('~/images/pushpin.png');
}
But all that happens is I get a huge gap before the heading. But if I use http:// to reference the image, it works. Using ~\images\myimage.png fails.

Answer 1

you try with code below maybe can help you:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
position:relative;
padding: 30px 0 0 120px;
}
.page_header::before{
position:absolute;
left:0;
top:0;
content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png');
}
Working Demo

Answer 2

Here's how you can style all headers with the same image:
.page_header {
background: url('http://www.healthylivingjunkie.com/wp-content/uploads/2014/10/bulletPoints.png') left center no-repeat;
background-size: 14px;
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
margin-bottom: 10px;
padding-left: 20px;
}
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>

Answer 3

There's a few ways to achieve this. Either by use of the :before selector or by setting the background of the div to your image and pushing the text across using padding.

Answer 4

You could set the background image of the div and pad the left side to move the text over
padding-left:120px; // width of image + spacing
background: url("http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png") no-repeat;

Answer 5

Yeah, you don't have to go to code part and you can do this with css using pseudo element before as you have to insert it before the element.
.page_header:before{
content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png');
}
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>