Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Adding BannerImage to the CSS Background Image


Go to End


8 Posts   3075 Views

Avatar
stevanovich

Community Member, 63 Posts

10 February 2009 at 5:21am

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?

Avatar
Nivanka

Community Member, 400 Posts

10 February 2009 at 7:18am

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

Avatar
stevanovich

Community Member, 63 Posts

11 February 2009 at 1:19am

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.

Avatar
Nivanka

Community Member, 400 Posts

11 February 2009 at 1:54am

use this

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

Avatar
stevanovich

Community Member, 63 Posts

13 February 2009 at 12:24am

Excellent works like a dream thanks!!!

Avatar
Nivanka

Community Member, 400 Posts

13 February 2009 at 12:26am

sweet! :)

Avatar
patte

Community Member, 63 Posts

13 February 2009 at 3:36am

Edited: 13/02/2009 3:36am

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

Avatar
Nivanka

Community Member, 400 Posts

13 February 2009 at 4:40am

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

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