CSS background image not showing in Revo?

LOL. I was typing this while Zi was entering his message:

Is the path to your CSS file:

assets/css/filename.css, or is it down another directory?

This address shows the image in question:


This address shows the CSS file:


Overall the CSS file is working just fine for the template. Its adding the background images that is not working...

Max

Edit: this is in the head code for my template:


It works fine. All of the CSS stuff is generating on my pages.

Inside my CSS file I have background declarations like:


I just do not get it. I have built countless sites without encountering this problem...

Let’s see if I can beat Zi to the punch.

Try this:



The directory above css (..) is nutricompounds and the images directory is below that.

The .. is an alias for the directory above the directory of the current file (in this case styles.css).

Bob! you won!



Use [tt]../images/banner.jpg[/tt]

OK, you smart boys, that works!

But why?

I tried just about every combination path to this image specifically (done this before) and it would not show? Is this due to a cache issue? Me saving the CSS file but the cache holding onto to previous version even though I am refreshing the page from the front end?

Thank you both though!

Max

Edit: in other words if I was not using the ..alias, what would the specific link to this image be? I tried just about everything? I sort of feel stupid here. I have built about 100 sites and about 20 or so Evo sites without running into this mess...

Quote from: zi at Feb 24, 2011, 11:23 PM

Bob! you won!

I took touch-typing in school. My parents made me do it during the summer and I complained bitterly. I was the only guy in the class, which should have been a plus, but wasn’t. It was one of the only things they ever truly forced me to do. They said I’d be grateful later and boy am I.

@PhotoWebMax: The paths in a CSS file are an odd case. If you use a relative URL in a CSS file, it’s always relative to the location of the CSS file. I learned that from Sottwell, and before I did, I used to hard-code in the full URL. Remember that it’s a URL, not a file path -- that’s another mistake that can keep up up all night.

Here are your two URLs:

Image: http://localhost:8888/nutricompounds/assets/templates/nutricompounds/images/banner.jpg

CSS File: http://localhost:8888/nutricompounds/assets/templates/nutricompounds/css/styles.css

You’re in the second one when the background image URL is processed, so .. translates to the directory above the current directory (CSS/), which is:

http://localhost:8888/nutricompounds/assets/templates/nutricompounds

../.. would be:



../../.. would be:



The trick is to go up to a directory that is a parent of both files, in this case .., which is:



and then add the rest of the path down to the image file, so:



or



Which is the same thing.


Now you have the URL that worked from the browser address line.

I pulled a sneaky on my kids, although it won’t work now. Before everything went mouse-driven, I bought a video game "Hero’s Quest". It had an entry field, and you had to type in the commands such as "pick up rock", then "throw rock". All three of my boys learned to type pretty well playing that game.

Back to the topic at hand.

Keep in mind that .css files are not included into your MODx parser (via index.php) at all. They are totally independent files that are requested independently by the browser and served independently by the server. They have nothing at all to do with MODx, nor does MODx have anything at all to do with them. That is why relative paths used in .css files are relative to the .css file, while URLs in a MODx resource (or a snippet) are relative to the index.php file.

I am having a similar issue in Revo, but it is after compiling my css files with MinifyX. According to Sottwell the path should be written relative to the location of the cached css file, should it not?

the cache path is: assets/components/minifyx/cache/styles_1386910668.min.css
the image path is: assets/components/webflow/images/bg4.jpg

...and I am having no luck getting it to display as a background image when I edit a css file which is cached inside assets/components/minifyx/cache/styles_1386910668.min.css

Thank you!

According to the docs:

If you combine CSS files you should use absolute paths when using images or other URL related calls, the same goes for javascript.