Search code examples
csswordpresssprite

wordpress css sprite load image

I'm trying to use sprites just like this in my wordpress project. But I've got trouble in my css loading background images. I've checked the path in the console after loading the page, the url path is good but I've got an 404 error.

my css : 

#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
    width : 44px;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#facebook {
    left: 0px;
    background: url('/wp-content/themes/montheme/images/facebook.png') 0 0;
}

the error message in the console : Failed to load resource: the server responded with a status of 404 (Not Found)

enter image description here

Do somebody have a solution please ?

Solution

  • You don't need to use /wp-content/themes/montheme/ you can call it as:

    background: url("images/facebook.png") 0 0;

    if your image and CSS exist within your theme. Another approach is to add it to your functions.php and call it as:

    background: url("<?php bloginfo('template_directory'); ?>/images/facebook.png") 0 0;