Component building - using background images in css?

pwoolcoc

I am building components for our website based off of HTML/CSS templates our designers created. I would like to keep the separation of HTML/CSS like they have in their templates, but I don't know how to set the component so CSS declarations like

#my_div {
    background: url(../images/my_background_image.jpg);
}

will work when viewing/using the components in the Livesite editor. I have uploaded all the required images into my WORKAREA, but I don't know what to do without using inline CSS. We are just starting developing with Teamsite/Livesite/SitePub, and this is a hurdle I would love to get past.

ChrisNichols

Are you allowing users to change the background image? If not, just change the path in your css and it will display on any page, however deep. Loose the "..":

#my_div {
    background: url('/images/my_background_image.jpg');
}

I am building components for our website based off of HTML/CSS templates our designers created. I would like to keep the separation of HTML/CSS like they have in their templates, but I don't know how to set the component so CSS declarations like #my_div { background: url(../images/my_background_image.jpg); } will work when viewing/using the components in the Livesite editor. I have uploaded all the required images into my WORKAREA, but I don't know what to do without using inline CSS. We are just starting developing with Teamsite/Livesite/SitePub, and this is a hurdle I would love to get past.