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.

General Questions /

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

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

Adding BannerImage to the CSS Background Image


Reply


8 Posts   1805 Views

Avatar
stevanovich

Community Member, 60 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, 60 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, 60 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.

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