Transparent PNG background not working in <input> fields

HTML & CSS
1

Got a bit of an odd problem here. I’m trying to make various <input type=“text”> fields with semi transparent backgrounds using PNGs. The site will need to work on some fairly archaic browsers so I’m trying to avoid use of RGBa values if possible.

That said I can’t get the sodding thing to work.


input {
	background-image: url(imgs/general/trans-nav-bg.png);
	border: 1px solid #ccff66;
	padding: 2px;
	height: 16px;
	font-size: 10px;
	color: #fff;
}

Preview version online at http://cart.artparksholdings.com

I know the PNG is fine, I’ve assigned it to the bg of a <label> field and it works as expected. As soon as it’s used on an input field though it just displays as a solid colour. The colour is the right one (grey), it’s just lost its transparency value. Same issue on both Chrome, Safari and IE7+8.

As far as I’m aware transparent PNGs should work fine as input backgrounds? Everything I’ve read implies it should. So what glaringly obvious mistake am I making here?

Any help much appreciated.

2

The browser is applying a default background color of #fff. To override it, change

background-color: url(imgs/general/trans-nav-bg.png);

to

background: url(imgs/general/trans-nav-bg.png);
3

That was horribly easy… why didn’t I try that!? Thanks a lot!

4

No worries. I seem to get caught on background vs background-color a lot, so I almost always use the shorthand now.