CSS images routes prestashop problems

[seog]

I´m adapting my images in sprites and if I put route in global.css background:url('../img/imagename.jpg') this work perfect but I need write route in .css of a module directed to: mywebsite.com/img dir. This problem occurs:

 

if I write background:url('../img/imagename.jpg') in .css of a module then prestashop transform url in www.mywebsite.com/modules/modulename/../img/imagename.jpg

 

Also if I write the route directly in css module background:url('www.mywebsite.com/img/imagename.jpg') also adds before the code www.mywebsite.com/modules/modulename/ and link image don´t work

 

I tried with relative routes but it don´t work

 

Anyone know how to put the image route to (website/img) in the .css of a module without prestashop add automatically code in url?

[axelmdp]

Hello Seog. You need to write the route relative to the path in which the CSS file relies on.

 

If your css file is located in themes/THEME_NAME/css/modules/MODULE_NAME/MODULE_NAME.css then you should put

/* five times "../" in order to refer to the root url, and then the img folder */
background:url('../../../../../img/imagename.jpg')

If your css file is located in modules/MODULE_NAME/MODULE_NAME.css then you should put

 

/*  tree times "../" in order to refer to the root url, and then the img folder */
background:url('../../../img/imagename.jpg')

 

I hope this help you. If so, then change the topic title adding the [sOLVED] prefix

 

Best Regards,

 

Axel

------------------

Check this cool modules (must have) :

LoginAsCustomer for PS1.5

Cart Details

MultiTabsForProducts

[PascalVG]

To refer to your root and from there to your img folder, you can use '/img/' from anywhere, independent how deep you are.

 

'/' jumps directly to your root folder

'./' start at your 'current folder'

'../' starts at current folder, and goes 'UP/back' one level

'../../' starts at current folder, and, as Axel already described, goes 'UP/back' 2 x one level = 2 levels up. etc.

 

From there you can add whatever needed.

 

N.B. In tour template (tpl) files, you can also use the smarty variables, as described here (Thanks, Vekia!) :

http://mypresta.eu/e...-variables.html

 

My 2 cents.

Pascal

Edited April 17, 2013 by PascalVG (see edit history)

[axelmdp]

Hello PascalVG. Thank you for your contribution You're right with all that you say. I just want to add that it's necessary take care with the use of the absolute path ("'/' jumps directly to your root folder"), because the following:

• If your prestashop is not on the root url, you will have to add the proper path (i.e., "/myshop/").
  
• Also if you have it in the root folder and later you decide to move your shop inside another folder, you will have to update all the references inside all the css files that are using absolute references.
  

So, I'd recommend the use of the relative path instead the absolute, because you won't have to worry about these things.

 

Regards,

 

Axel

------------------

Check this cool modules (must have) :

LoginAsCustomer for PS1.5

Cart Details

MultiTabsForProducts

[PascalVG]

Thanks, Alex. Good advice.

[seog]

If your css file is located in modules/MODULE_NAME/MODULE_NAME.css then you should put

 

/*  tree times "../" in order to refer to the root url, and then the img folder */
background:url('../../../img/imagename.jpg')

 

Axel

------------------

Check this cool modules (must have) :

LoginAsCustomer for PS1.5

Cart Details

MultiTabsForProducts

 

This works, thank you very much for your contribution

 

best regards