Panel Macro Background Image
Asked by stephanie lollar:

I am trying to set an image as a background within a panel macro. Is there a way to do this? Note we do not have html enabled.


Answers:
author: scott
body: Here is a macro that I wrote that allows you set a custom background, corner radius etc.

## Macro title: Image With Background  
## Macro has a body: Y  
## Body processing: Rendered  
## Output: Selected output option  
##  
## Developed by: Scott Greig scott@scottart.com  
## This free to use and modify... Have fun!

## This is an example macro  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) PanelTitle:title=PanelTitle\|type=string\|required=false\|default=\|desc=Panel Title  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) PanelWidth:title=Panel Width\|type=string\|required=false\|default=auto\|desc= Examples: auto,4px,50%  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BorderStyle:title=Border Style\|type=string\|required=false\|desc=Examples: solid,dashed  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BorderColor:title=BorderColor\|type=string\|required=false\|default=black\|desc=Examples: solid,dashed  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BorderWidth:title=Border Pixel Width (Value Only)\|type=int\|required=false  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BorderRadius:title=Border Radius (Value Only)\|type=int\|default=0\|required=false  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) Image:title=Image Name\|type=string\|required=false  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) ImageRepeat:title=Image Repeat\|type=enum\|enumValues=repeat,repeat-x,repeat-y,no-repeat,space,round\|default=repeat\|desc=Choose how the background image is tiled  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BackgroundColor:title=Background Color\|type=string\|required=false  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) ContentPadding:title=Content Padding Pixel Width (Value Only)\|type=int\|default=10\|required=true  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) TitleBackgroundColor:title=Title Background Color\|type=string\|required=false  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) TitleColor:title=Title Text Color\|type=string\|required=false  
#set ($borderWidth = $paramBorderWidth+"px")  
#set ($contentPadding = $paramContentPadding+"px")  
#set ($borderRadius = $paramBorderRadius +"px")

#set ($borderTopRadius =$borderRadius )  

#if($paramPanelTitle != "")  
#set ($borderTopRadius ="0px")

<br />

\<div style="color: $paramTitleColor; background: $paramTitleBackgroundColor;border-radius: $borderRadius $borderRadius 0px 0px;padding:10px;border: $borderWidth $paramBorderStyle $paramBorderColor;border-bottom-style: hidden; width: $paramPanelWidth;"\>\<b\>$paramPanelTitle\</b\>\</div\>  
#end  
\<div style="background-image:url('$paramImage');background: $paramBackgroundColor;border-radius: $borderTopRadius $borderTopRadius $borderRadius $borderRadius ;background-repeat:$paramImageRepeat;padding:$contentPadding;border: $borderWidth $paramBorderStyle $paramBorderColor;width: $paramPanelWidth;"\>$body\</div\>

![image.png](https://community.atlassian.com/t5/image/serverpage/image-id/60999iCD14CF658BB2C767/image-size/large?v=v2&px=999 "image.png")Here is a sample with custom background from the web:

<https://media.wired.com/photos/5a593a7ff11e325008172bc2/master/w_1280%2Cc_limit/pulsar-831502910.jpg>

Also showing a custom title background color and radius

comments: author: stephanie lollar
body: Thank you [@scott](/t5/user/viewprofilepage/user-id/3389429) - I will try this and let you know how it goes!


author: stephanie lollar
body: [@scott](/t5/user/viewprofilepage/user-id/3389429) This worked after making Param lower-case - thank you!

I would like to be able to use an image not on the web, in other words an image attached to the page. Is there a way to do that?


author: Curtis Freudigmann
body: [@stephanie lollar](/t5/user/viewprofilepage/user-id/2100343) -

If you have an image attached to your page, you can click the attachments button (little paperclip) at the top of the page. Then click on the image name you'd like to use from the list. Once you click on it, it will show a preview of the image. If you right-click the image you can click 'Copy Image Address'. This will provide you with a URL to use to link to an image attached to your page.


author: scott
body: Oops I didn't notice that it got converted to upper case when I pasted it in. Sorry. :)


author: stephanie lollar
body: Thank you both!


author: scott
body: Here is a user macro that I made. I allows you to set the background image, the corner radius, padding width etc. This is provide as is etc. etc.

## Macro title: Panel With Background  
## Macro has a body: Y  
## Body processing: Rendered

##  
## Developed by: Scott Greig  
## Date created: 19/07/2019  
## Installed by: My Name

## This is an example macro  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) PanelTitle:title=PanelTitle\|type=string\|required=false\|default=\|desc=Panel Title  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) PanelWidth:title=Panel Width\|type=string\|required=false\|default=auto\|desc= Examples: auto,4px,50%  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BorderStyle:title=Border Style\|type=string\|required=false\|desc=Examples: solid,dashed  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BorderColor:title=BorderColor\|type=string\|required=false\|default=black\|desc=Examples: solid,dashed  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BorderWidth:title=Border Pixel Width (Value Only)\|type=int\|required=false  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BorderRadius:title=Border Radius (Value Only)\|type=int\|default=0\|required=false  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) Image:title=Image Name\|type=string\|required=false  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) ImageRepeat:title=Image Repeat\|type=enum\|enumValues=repeat,repeat-x,repeat-y,no-repeat,space,round\|default=repeat\|desc=Choose how the background image is tiled  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) BackgroundColor:title=Background Color\|type=string\|required=false\|desc=This will disable the background image if set.  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) ContentPadding:title=Content Padding Pixel Width (Value Only)\|type=int\|default=10\|required=true  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) TitleBackgroundColor:title=Title Background Color\|type=string\|required=false  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) TitleColor:title=Title Text Color\|type=string\|required=false  
#set ($borderWidth = $paramBorderWidth+"px")  
#set ($contentPadding = $paramContentPadding+"px")  
#set ($borderRadius = $paramBorderRadius +"px")

#set ($borderTopRadius =$borderRadius )  

#if($paramPanelTitle != "")  
#set ($borderTopRadius ="0px")

<br />

\<div style="color: $paramTitleColor; background: $paramTitleBackgroundColor;border-radius: $borderRadius $borderRadius 0px 0px;padding:10px;border: $borderWidth $paramBorderStyle $paramBorderColor;border-bottom-style: hidden; width: $paramPanelWidth;"\>\<b\>$paramPanelTitle\</b\>\</div\>  
#end  
\<div style="background-image:url('$paramImage');background: $paramBackgroundColor;border-radius: $borderTopRadius $borderTopRadius $borderRadius $borderRadius ;background-repeat:$paramImageRepeat;padding:$contentPadding;border: $borderWidth $paramBorderStyle $paramBorderColor;width: $paramPanelWidth;"\>$body\</div\>


author: Curtis Freudigmann
body: Hi [@stephanie lollar](/t5/user/viewprofilepage/user-id/2100343)

I have found that with Confluence Server and access to the stylesheet, you can target the panel class and add a background image using css.

So something like:

```
.panelContent { background-image: url([enter.url.here])}

*Remove [ ] brackets
```

I was able to test this and it works, however, because I am targeting ALL panel classes with this, every panel on this space will have the same background image.

HTH

-Curtis

comments: author: stephanie lollar
body: Thank you, that is what I'm looking for, but I need a different image in each panel.


author: stephanie lollar
body: I'm wondering if there is a way to reference a panel by id or text within the panel?


author: Curtis Freudigmann
body: I looked a little more in to this and it seems there might be an Add-On for this, unfortunately however, I do not believe that is possible using my method.

-Curtis


Tags: confluence-server

server