having three background images (one of them repeats)

css background images

[Alphamonkey]

how could i make it so that i have three background images.
i am using a free flyout menu and i am tring to make the top right and bottom right rounded. I have all this by using transparent pngs.

i want to know how to make it so i can use three images on one element.

this is as far as i got
.orangemenu, .orangemenu ul li {
color: white;
background: url(images/orangeback-TR_transparent.png) no-repeat top right #F7941C;

this only does one image with a background of a color. This does not work because the rounded edge just gets filled in with the color.

Can anyone help or give suggestions?
Thanks

[swa66]

Welcome [webmasterworld.com] to WebmasterWorld!

What I think you're asking for is a technique called sliding doors.

Basically you use two elements (horizontally or vertically) that are positioned to have the outer one stick out on one side of the inner one (e.g using a <li> and the <a> within it).
The background images are then put in it and they are far larger than needed, so that where they meet up, they join to create a button or whatever you drew them to make up.
A second phase is to merge the background images into one image (way too large) and use it twice, once of it's one end and once for the opposing end on the other element.
Transparent images aren't used in this technique as the transparent part would show the underlying middle part of the other image.
[transparent pngs can also cause trouble in IE6]

You should find plenty of examples both here via google
e.g.:
[webmasterworld.com...]

Also if you're looking for just rounded corners, CSS3 will have that and most browsers (read: not IE) have implemented pre-CSS3 solutions already that are usable.
[w3.org...]

webkit bassed browsers (e.g. safari, chrome)

-webkit-border-radius

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

Mozilla based browsers: (e.g. Firefox)

-moz-border-radius

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

[Alphamonkey]

hi, thanks for all that great information! However, I have looked at the border-radius solutions, but i seem to be having issues. I am using NuSphere PhpED to edit CSS and when i put any of the border statements in there (webkit, moz or just border-radius) it does not highlight it in blue as it would with things like "background:" or "width:". I thought perhaps that it would still work, despite that, but when I place a border-radius in be it

-webkit-border-top-right-radius or
-moz-border-radius-topright or
border-radius

i am using firefox for moz

it does nothing to menu. Do you have any idea whats going on? I figured that this would be the best solution based on the examples.

Thanks in advance!

[edited by: Alphamonkey at 5:03 pm (utc) on Dec. 31, 2008]