CSS - How do I assign set background image for span based on local image url?

Question

My setup is as follows.

1) CSS file (code below) resides in Stylesheets directory

2) HTML resides in same level as Stylesheets folder

3) Images folder resides in same level as Stylesheets

All above three elements 2 folders, 1 html reside in the same level on the local directory.

Question

How do I get the image url for local file residing in Images directory, preferably using a path without leading double dots?

span.check
    width: 14px
    height: 14px
    border: 2px solid black
    display: inline
    position: absolute
    top: $spacing
    content: url(Images\icon_check@2x.png)
    background-size: 14px 14px
    background-repeat: no-repeat

EDIT Working CSS - Sass

span.check
        width: 14px
        height: 14px
        border: 2px solid black
        display: inline
        position: absolute
        top: $spacing
        z-index: 1
        background-image: url('../Icons/icon_check@2x.png')
        background-size: 14px 14px
        background-repeat: no-repeat

Answer 1

Your image will not display because the content property is for the :before and :after pseudo elements. You may also find that using a background image gives you more flexibility for sizing and so on. More here on CSS-Tricks .

The path to your image can be accomplished by going down a directory (not sure why you want to avoid that) or by a leading slash for a relative path from the root directory.

Answer 2

You can easily get image with

background-image: url('Images/icon_check@2x.png');

You can Check yourself :)