I have set up a bannerimage in CMS for my pages but want to use it in the CSS in background-image element not img. When I use $BannerImage in css it brings in img tags and alt tags etc. So what I need is the image in its standard path format. Anyone have any idea how I can have a different background image on everypage?

I will be able to help you if you can explain a bit more about how you tried to do this.

I have setup a bannerimage to pages so a separate image can be uploaded for everypage as per imageupload tutorial. Now I want the image not to appear as an image in the page template using $BannerImage but want the image to be available using background-image in a style at the top of a template. ie:

<div style="background-image: url($BannerImage)"></div>

This is how I thought it would work but won't due to the img tags and stuff that is brought in.

I hope this is clearer.

I just need a simple path to the pages BannerImage.

use this

<div style="background-image: url($BannerImage.URL)"></div>

Excellent works like a dream thanks!!!

sweet! :)

Hi Nivanka,

here is my question ;-)

Do you know how to get image width and height? I would like to set the image size when adding a a background image to a div block:

<div style="background-image: url($BannerImage.URL); width: $BannerImage.WIDTH(???)px"></div>

Any idea?

Thanks much!
patte

check this documentation, you will find all what you need there.

http://doc.silverstripe.com/doku.php?id=gd