Add an image behind the search in header

HI There,

I'm wanting to add an image as a background behind the search button and text input area in on the top of the screen.

A border basically around the search but as an image.

Any input appreciated.

Which search??

A link to your site would help....just place ONE space in your link to break the link so it won't get listed as in
http ://www.zen-cart.com/

I'm re designing site in WAMP at the moment so can't provide link and don;t have this search switched on in my live site.

It is the TOP search button and text input switched on when you setup Zen Cart.

top right.

h t t p ://demo.opensourcecms.com/zencart/

tpl_search_header I think?

In your stylesheet for your template try adding a background image sized correctly to this tag

#navMainSearch

I tried:

#navMainSearch {
background-image: url(../images/test.png);
}

It didn't change anything unfortunately.

If to the correct stylesheet - - try clearing your browser cache

I'm editing stylesheet.css

The cache is clean.

Force refresh (control+f5)

Tried in various browsers still no change.

Checked image file path and it is correct.

If I edit:

#navMainSearch {
float: left;
}

Then this moves the search box.

I only thing different about this search I can think of is that it is controlled from the layout Box Controller??

Still no solution to my issue.. any ideas anyone ?

Hi there Kobra,

I played around a bit more with the coding you suggested and got things working.

For some reason the test image I created wouldn't work in the background of the search bar... no idea why. Right file path and wasn't corrupt. It was a png if that makes any difference.

When I tried loading another image and then it worked no problems.

So if anyone wants add an image or style the TOP search in your stylesheet.css file:

#navMainSearch {
float: right;
background-image: url(../images/yourimage.jpg);
height:50px;
width: 290px;
}

Thanks Kobra