Search code examples
compass-sasscss-sprites

why i am getting wrong path with compass sprite

With compass when i am trying to create a sprite the path of the main sprite image in screen.css is going wrong because of which i can't see the image.

My scss code is

@import "compass";
@import "spr/*.png";
 h1 { @include spr-sprite("car");  height:50px; width:50px; }

My css output for sprite

.spr-sprite, h1 {  background: url('/images/spr-sa37328aec0.png') no-repeat; }
h1 {  background-position: 0 -147px;  
height: 50px; 
width: 50px;
overflow: hidden; 
text-align: left; 

                  }

You can see that the out of the background should be started with ../ but not directly with the /images/. Its creating a problem. My folder paths for images

images
 ------spr
          ---*.png
sass
-----screen.scss
css
---screen.css

My config.rb codes

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

Am new to sass and compass, so may be i am missing some code. Please help me to find it out. Any help will be greatly appreciated. Very Very Thanks in Advance to repliers.

Solution

  • Add this to your config.rb:

    relative_assets = true

    (I'm assuming that you're not serving this from the root of a domain, otherwise it shouldn't be needed. Are you viewing the page(s) via file://?)