CODEWITHSUNDEEP
csssasscompass-sass
Doug Smith
Doug Smith

Reputation: 29314

Why is my Compass spriting not linking to the right image?

I'm trying to use CSS sprites in my website, and I have before with Compass, but the image link is ever so slightly off for my pictures today.

I have a project root with an index.html file in it, then a styles/ folder, a style.css file and a sass folder in that with style.scss.

My config.rb file, which is within the styles folder from the root, looks like:

http_path = "/"
css_dir = ""
sass_dir = "sass"
javascripts_dir = "javascripts"
images_dir = "../images"
output_style = :compressed

And I'm trying to show the images with:

a {
    @include twitter-sprite(twitter-icon);
    display: block;
    height: 27px;
    margin: auto;
    width: 31px;

    &:hover {
        @include twitter-sprite(twitter-icon-hover);
    }
}

I also have @import "compass"; at the top.

I have this in my HTML: <a href="http://twitter.com/syllableapp"></a>

And I basically just want to set the background.

But whenever I try to view the image on the webpage, it won't show up, but the box is still clickable. When I inspect it, it says the address is/../images/whatever.

Upvotes: 0

Views: 86

Answers (1)

sam
sam

Reputation: 40668

Set http_images_path to the full http path to images on the web server.

In your case Compass is inferring http_images_path = http_path + images_dir = /../images/.

Setting relative_assets = true may also solve it.

Upvotes: 1

Related Questions