Member Avatar for m-hrt

im having issue with png image as im using it on a input type. . . as a search bar it always shows the background even the image is transparent what should i do?

this is the image shows the background . . . . sorry had to post image like this because it was saying link forbidden.

*CSS CODE --------

.smartbar ul li input.search_bar {
	border:none;
	width:174px;
	height:22px;
	background-image: url(../images/input_search.png);
	background-repeat: no-repeat;
	padding: 0 5px 0 10px;	
	float:left;
	margin: 0 4px 0 4px;
}
Edited by m-hrt because: n/a
  • 4 Contributors
  • 7 Replies
  • 100 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Louilly

Dani AI

Generated

Short explanation: a PNG's transparent pixels reveal whatever is behind that element — and form elements like inputs often have a user-agent background (usually white). That is why still saw a filled background even though the PNG looked transparent. 's quick fix (setting the input background to the image color) makes the problem invisible, but it does not change why the PNG shows a solid fill.

How to check: open the PNG in an image editor to confirm it has a real alpha channel (not a white background baked in or an exported "matte"). Drop the image directly onto a page that has a clearly different page background; if white still shows through, the file was exported without true alpha. Use the browser inspector on the input to view computed styles and see what background color or vendor styling (shadows/gradients) the input has. See the PNG format background for alpha details: Portable Network Graphics and CSS background painting on MDN: background.

Practical fixes: either make the input itself transparent so the page/panel background shows through, or put the search graphic on the wrapper and keep the input transparent and padded. To remove native control styling you may need vendor appearance rules; for example:

input.search_bar {
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Notes and cautions: re-export PNGs with true alpha (PNG-24/PNG-32) and avoid using a matte color when saving, or you get a colored halo. was right to think about old browsers — legacy IE6 needs special handling — but modern Firefox/Chrome/Safari support PNG alpha. Removing default appearance can change focus and border visuals, so re-style those after making the input transparent.

Recommended Answers

All 7 Replies

Member Avatar for Member #46692

Could this be a problem to do with browsers.

I know older browsers don't support transparency?

Member Avatar for m-hrt

but im using firefox 4 :)

tried with chrome safari same . . . . thats not browser problem it happens when im using an input type and a png image ? any idea

Member Avatar for Louilly

Try adding background-color:#bee0e1; to your .smartbar ul li input.search_bar css

Member Avatar for m-hrt

Try adding background-color:#bee0e1; to your .smartbar ul li input.search_bar css

thanx that solves the problem still the color is in the bg but not showing and it still doesnt answer my question why is the color is in the background and is not transparent?

Member Avatar for Louilly

Hi, it's because input fields automatically have the background colour set to white

Member Avatar for matricol

i think its a ie related problem

Member Avatar for Louilly

I don't think it's just IE related, it's the same in most browsers

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.