image backgrounds in css

Hey Guys

I’m quite new to Modx. I have done sites before using evolution, but I’m now trying to do everything in revo.

In evo I used to create a css file as follows: assets/templates/templatename/styles/style.css

I would also create an images folder as follows: assets/templates/templatename/images/image.jpeg. This image file would contain background images that were linked in the .css. Any background images within the .css file would (for example) be linked as follows:- background: url(../images/topbg1.gif)

I tried to do the same in revo, but the background image wouldn’t display. The image exists though as the browser displays the image when I type in the path to the image in the address bar, eg: http://www.site.com/assets/templates/styleimages/image.gif

I worked round this problem by changing the image path within the .css file to the full url, eg: url(http://www.site.com/assets/templates/styleimages/image.gif

I’m obviously doing something wrong. Anyone able to help...thanks.

Relative paths in .css files are relative to the .css file. So if you are using a resource for your .css file, then the relative path to the image would have to be relative to the main site’s index.php file, since that’s what the .css file actually is.

Quote from: sonic55 at Aug 10, 2010, 05:59 PM

Hey Guys

I’m quite new to Modx. I have done sites before using evolution, but I’m now trying to do everything in revo.

In evo I used to create a css file as follows: assets/templates/templatename/styles/style.css

I would also create an images folder as follows: assets/templates/templatename/images/image.jpeg. This image file would contain background images that were linked in the .css. Any background images within the .css file would (for example) be linked as follows:- background: url(../images/topbg1.gif)

I tried to do the same in revo, but the background image wouldn’t display. The image exists though as the browser displays the image when I type in the path to the image in the address bar, eg: http://www.site.com/assets/templates/styleimages/image.gif

I worked round this problem by changing the image path within the .css file to the full url, eg: url(http://www.site.com/assets/templates/styleimages/image.gif

I’m obviously doing something wrong. Anyone able to help...thanks.

Not sure if you’ve just made a typo but twice you’ve type the folder as styleimages "/assets/templates/styleimages/image.gif" If in fact the folder is styleimages and actualy site outside of the style folder your style for the background should be: