CSS | importing sprites incorrect relative path

I am trying to use CSS to import my sprites and I have done it 100 times before but this one time it doesn't seem to be working. I am using relative paths too get the image from within my CSS file.

My file structure looks like so:

Root 
|
| Index.html
|
|____Content
     |____css
     | main.css
     |
     |____images
     | tips.png

The CSS I am using to try and get the items out of the file is as follows

//tips icons
.sprite-tips{
    background: url("../images/tips.png") no-repeat;
    width: 25px;
    height: 25px;
}
.tips-tick {
    background-position: 0 0;
}
.tips-cross {
    background-position: -30px 0;
}

This is how I am trying to apply it :

<div class="sprite-tips tips-tick"></div>

This code is copied from one of my other working projects and it is not working, any ideas?