I want to place a background image in a TEXT widget at the top of the righthand sidebar. All widgets currently share the same background but I want one to be different.

Can anyone help here?

www.igrowkids.com.au

Thanks!

When you put a new text widget in the sidebar it get it's own id such as div#text2 or div#text3. You will have to use Firebug in Firefox or look at the source code to determine what it is then just use a background statement in ATO>Add HTML/CSS Inserts>CSS Inserts

Thanks!

This is the css I inserted -

div#text-4{
background:url(/wp-content/themes/atahualpa353/images/guarantee.png);
background-repeat: no-repeat;
height: 65px;
border: solid 0px;
}

Now I need to make the image clickable and hide the link text.

This is the html I inserted in the TEXT widget -

<a href="http://www.igrowkids.com.au" title="iGrow Kids Clothes online shopping guarantee"<div id="guarantee"><span>100% Guarantee</span></div></a>

And now I haven't got it working quite right...and I think is is because I am not referencing it correctly in the css...

div#guarantee span {
display:none;
}

The code you have for the hyperlink is missing a > after guarantee" but I think you are trying to make this more difficult than it needs to be. How about putting this in the text widget

<a href="http://www.igrowkids.com.au" title="iGrow Kids Clothes online shopping guarantee"><img src="http://www.igrowkids.com.au/wp-content/themes/atahualpa353/images/guarantee.png" /></a>

and this in CSS Inserts

div#text-4{ 
background:transparent;
}   

I did this just now...but the colour background of the widgets comes back. My image has transparent areas which I want to maintain without a background colour.

So, I placed a totally transparent .png as the background image AND give it the transparency attribute (is this the right term?) as you suggested. This way the text is transparent AND I get my background transparent AND the transparency in the guarantee.png is evident.

Here is the css code I now have:

/* Add transparency to Guarantee Text widget */
div#text-4{
background: transparent url(/wp-content/themes/atahualpa353/images/transparent.png);
border: solid 0px;
}

I thought the background:transparent should have given you a transparent background on which you could put your png file. But hey It's working and that's what matters. Good job.