Relative directory in Compass

[rouse]

Anyone familiar with Compass to help solve a problem with sprites loading. The markup in the compile CSS points to the wrong address for the loading of the sprites.
Here is the generated CSS

/* ===================================================== */
/* Sprites
/* ===================================================== */
.spr-sprite, header h1 {
  background-image: url('/images/spr-sf52e1e883c.png');
  background-repeat: no-repeat;
}

.pitch-sprite, .pitch.left div, .pitch.middle div, .pitch.right div {
  background-image: url('/images/pitch-s4b17d3ee2e.png');
  background-repeat: no-repeat;
}

This is what works and what I am trying for where you back up one directory with '../'.

spr-sprite, header h1 {
     background-image: url('../images/spr-sf52e1e883c.png');
     background-repeat: no-repeat;
 }

All of my research points to using the configuration parameter “relative_assests = true”, to resolve this but I can’t seem to convince my compass project to give me relative directories “../” for my sprite images. I compile my sprites with this configuration file.

 .pitch-sprite, .pitch.left div, .pitch.middle div, .pitch.right div {
     background-image: url('../images/pitch-s4b17d3ee2e.png');
     background-repeat: no-repeat;
 }

All of my research points to using the configuration parameter “relative_assests = true”, to resolve this but I can’t seem to convince my compass project to give me relative directories “../” for my sprite images. I compile my sprites with this configuration file.

# Require any additional compass plugins here.
 # -----------------------------------------------------------------------------
 project_path = File.expand_path("..",File.dirname(__FILE__))

 # Set this to the root of your project when deployed:
 # -----------------------------------------------------------------------------

 relative_assets = true

 http_images_dir = "images"

 http_path = "/"
 css_dir = "css"
 sass_dir = "scss"
 images_dir = "images"
 javascripts_dir = "js"


 # Output style and comments
 # -----------------------------------------------------------------------------

 # You can select your preferred output style here (can be overridden via the command line):
 # output_style = :expanded or :nested or :compact or :compressed
 # Over-ride with force compile to change output style with: compass compile --output-style compressed --force
 output_style = :expanded
 #environment = :development

 line_comments = false
 cache = true
 color_output = false # required for Mixture

 require 'sass-globbing'

 # Obviously
 preferred_syntax = :scss

 # SASS core
 # -----------------------------------------------------------------------------

 # Chrome needs a precision of 7 to round properly
 Sass::Script::Number.precision = 7

I wonder if anyone sees a problem?

[rproffitt]

For this I had to read http://blog.grayghostvisuals.com/css/image-url/ again. Since the root is simply / there is no reason to think you can jump above / with a ../ here. So what is ../ to / ?

[rouse]

If I understand your observation correctly, note that the CSS file is located in the "CSS" directory. So to find the ''images" directory, you need to look one directory back to find the "images" directory. See the attached photo of the project directory. Also when I directly edit the CSS file to make the call to load the sprite like this:

background-image: url('../images/pitch-s4b17d3ee2e.png');

I can load the sprites. Hope that makes sense?

[rproffitt]

Not yet. /somefolder takes me to the Site root and no need for the .. here. Also if I see it right ../images being the root is at / (Site Root) you would be trying to get to tutsSCSS which has no images folder. Besides it should allow access above Site Root.

Something's off here. You did call out the images folder so did
background-image: url('pitch-s4b17d3ee2e.png'); work?

Second thought. If the images folder is used, then indeed you could use "../images"

[diafol]

If the CSS is read from tutsSCSS_index.html, then

background-image: url('images/pitch-s4b17d3ee2e.png');

should work - no need for any ..relatives or force root. However, if you need to access this CSS file from multiple locations, you may need to place an absolute (force root). It's unclear where your root actually is, i.e. does '/' refer to:

tutsSCSS or tutsSCSS/SiteRoot - what does your url for the html page look like?

[rouse]

Let me start that the I am working from Netbeans IDE which puts up the false "Site Root" as a label in the directory map that is included in the note.
The browser address shows the following:

http://localhost:8383/tutsSCSS/tutsSCSS_index.html

As far as what is the correct CSS in calling the the sprite:

background-image: url('/images/pitch-s4b17d3ee2e.png');
background-image: url('images/pitch-s4b17d3ee2e.png');

background-image: url('images/pitch-s4b17d3ee2e.png');

The first two do not work. I have tested them. When the SASS is compiled into CSS, it writes out the first. I can then edit the CSS file and the only one that works is the third.
I think I have a flag or a switch set incorrectly or "mixin" needs to be called.

[diafol]

What.s the difference between 2nd and 3rd??

[rouse]

Oops! The third should read

background-image: url('../images/pitch-s4b17d3ee2e.png');

Thanks for the good eye.

[rproffitt]

Here's my thought that needs someone to confirm. You called out the path for images to /images so the .image calls automagically know to use the path to /image then what you supplied earlier at images_dir = "images".

Now ../image should work since you are now saying /images/../images/someimage.png

At least that's what it looks like to me.

[rouse]

rproffitt:
Thats my observation. The problem for me is now resolved by changing the config.rb file. I took a config.rb file from another tutorial and placed it my project and now the ending are "../images", which is what I expected, but I still don't know what settings I changed. Thanks to people that helped.