Transparent Png with Background Color

[Mattoman]

Hey

I was just wondering if there is a solution to this:

I have a drop down menu with a (PNG Transparent Image) at the bottom. The UL needs to be able to be set to any height depending on the amount of sub navigation items (The image is 13px high)

The image:

#nav li ul {
	background: url('../images/drop-down.jpg') bottom #0055a4 no-repeat;
	width: 175px;
	position: absolute;
	visibility: hidden;
	padding: 10px 6px 13px;
	margin: 10px 0 0;
	z-index: 4;
}

Whats happening is the transparent parts of the image are being colored in by the #0055a4

Incorrect:

[John_Betong]

From: w3Schools.com

When using the shorthand property the order of the property values are:

* background-color
* background-image
* background-repeat
* background-attachment
* background-position

It does not matter if one of the property values are missing, as long as the ones that are present are in this order.

Try:

background: transparent url(‘…/images/drop-down.jpg’) no-repeat bottom;

.

[PaulOB]

You’ll have to apply the bottom of the drop down to another element instead as you can’t apply it to the element that has a background color.

You could either us a div wrapper on the ul for the image at the bottom and then use background color on the inner ul. The outer div would have padding-bottom equal to the height of the image so that the inner elements background colour is kept out.

Alternatively and if the design allows apply the background colour to the list elements and apply just the image to the ul and use padding-bottom to keep the list clear.

[system]

Apply the background-color to the line items or the anchors inside the instead of the UL. End of problem. You put that side padding on the LI instead, then move any button formatting to your nested anchors, and you should be able to achieve the same effect.

You could also add an extra DIV around the UL, but I’d try to avoid any extra markup.

Oh, and when you state background-position be sure to state BOTH directions, some browsers are known to ignore it if you omit one… so say “bottom left”, not just “bottom”

[Mattoman]

@deathshadow60

Apply the background-color to the line items or the anchors inside the instead of the UL. End of problem. You put that side padding on the LI instead, then move any button formatting to your nested anchors, and you should be able to achieve the same effect.

You could also add an extra DIV around the UL, but I’d try to avoid any extra markup.

Oh, and when you state background-position be sure to state BOTH directions, some browsers are known to ignore it if you omit one… so say “bottom left”, not just “bottom”

Thanks for you reply, ill give this a go