Images url's in the style.css file?

Highlighted
New Member
10 0 0

Hi everyone

I am creating a new theme at the moment, and I need to add a background image to one of the properties in the styles.css file. Are the links absolute or relative? and how do I go about finding that url?

Also how do I upload the image? Does it have to be added in the backend?

Thanks for any help offered

0 Likes
Shopify Expert
314 0 4

css and images are in the same folder (assets) so your css will be something like:

#selector {background:url(image.jpg);}

Cheers

Alex

www.spicydesign.ca  http://experts.shopify.com/spicydesign
0 Likes
New Member
10 0 0

Nice one. I was hoping that it was going to be straight forward like that. What threw me was when I was looking through the the styles.css file at other background images, they seemed to have an absolute path. Is that because they are images that have been set in the admin back end?

Thanks for your help Alex.

0 Likes
New Member
10 0 0

Also if I want to apply a background image to a css property, how do I go about uploading that image to the assests folder? (I am developing the theme through TextMate). 

EDIT: Ok. I have just had a look some more through the back end and in the template editor, I used the option "add a new asset" to upload the image. Is that the correct way to do it?

Thanks again for any help offered.

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5841 0 116

Sorry but I'm going to have to contradict Alex on this :)

Always always always use the asset_url for all asset files in your stylesheet.

 

#selector {background:url({{ 'image.jpg' | asset_url }});}

 

 

http://shopifyplus.com ::: http://twitter.com/bacchus
1 Like
Shopify Staff (Retired)
Shopify Staff (Retired)
5841 0 116

@Scott

how do I go about uploading that image to the assests folder? (I am developing the theme through TextMate). 

cmd+shift+u on the images you want on the site as assets.

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes