Skip to end of metadata
Go to start of metadata

Hi,

I'd like a search-box with a specific image behind it. That is, the typical

macro but over an image of my choice.

Here's what I have now that doesn't work:

{table:style="background-image: url(http://www.myserver.com/myimage.png)"}
{tr}
{td:style="background-image: url(http://www.myserver.com/myimage.png)"}{search-box}
{td}
{tr}
{table}

I've also tried

{div:style="background-image: url(http://www.myserver.com/myimage.png));"}
{search-box}
{div}

Any suggestions?

  • No labels

3 Comments

  1. Hehe - loose the quotes around the style parameter (wink)

    {div:style=background-image:url(http://www.adaptavist.com/download/attachments/401/picture+7.png);}{search-box}{div}
    
  2. Unknown User (jpermar)

    Thanks Alain! Just for completeness, the following code worked:

    
    {style}
    td.testing {
    background-image: url(http://www.myserver.com/mybutton.gif);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    }
    {style}
    {table:cellpadding=0|cellspacing=0|border=0}
    {tr}
    {td:class=testing}
    {search-box:all=true|button=false}
    {td}
    {tr}
    {table}
    
    
  3. Unknown User (kicha)

    Hi Alain,

    I am using the below mentioned code in the content section of Header panel. When I save the layout, I am able to view the images in the header panel in the manage layout but when I try to view it normally through application navigation, then I am not able to view the background images. I am using confluence 2.7.1 with themebuilder 3.3.3. This happened both in IE 7 and FireFox 3. Do I need to check any other settings to make it work?

    {style}
    .header_left
    {
    background-image: url(../images/header_left.jpg);
    background-repeat: no-repeat;
    width: 317px;
    height: 92px;
    }
    
    .header_middle
    {
    background-image: url(../images/header_middle.jpg);
    background-repeat: repeat-x; width:auto;
    }
    
    .header_right
    {
    background-image: url(../images/header_right.jpg);
    background-repeat: no-repeat;
    width: 451px;
    height: 92px;
    }
    
    {style}
    
    {table:border=0|cellpadding=0|cellspacing=0|width=100%}
    {tr}
    {td:class=header_left}{td}
    {td:class=header_middle}\\ {td}
    {td:class=header_right}{td}
    {tr}
    {table}