Solved: Multiple backgrounds for single element

cristobal03 · 09-May-2006, 12:36 PM #1

I doubt this is possible with CSS alone.

I'd like to have wrapper bullets for my header elements. I'm trying to develop for a strict environment so I'd rather not put the images within the document itself. Is there any way to add multiple background images to a single element? I can think of several undesirable workarounds involving nested spans and positioning, but I'd rather do this the most elegant way possible.

Attached is an image of the effect I'd like to create.

Thanks for any tips/suggestions.

chris.

WendyM · 09-May-2006, 01:11 PM #2

Hi Chris,
I don't know whether this is helpful, or even what you're looking for, but you might want to look into the :before and :after pseudo elements in CSS. Probably not something you'd want to use since they don't work in earlier versions of the browsers, but kind of interesting. Maybe.

cristobal03 · 09-May-2006, 01:51 PM #3

Thanks Wendy, that'd be great if it had broader support. For IE, looks like nothin' doin. I guess I'll stick with my spans. It's a shame, though

chris.

Rockn · 09-May-2006, 03:35 PM #4

I know there is a way to do it I just have to find the link. It is not a multiple image situation it is one image that only displays a portion of the div background based on the mouseover state. Is this what you are looking for?

cristobal03 · 09-May-2006, 03:52 PM #5

Not quite. It isn't a mouseover effect. Also, the spacing between the bookends (or whatever you want to call them) depends upon the text in between. I think Wendy's pseudo-classes are probably the closest to what I'm actually after, but since they're not well supported I've managed to emulate the look with spans. A la:

HTML Code:

<head> <style type="text/css" language="text/css">
  h2 {
    width: 400px;
    margin: 10px 20px;
    padding: 0 25px;
    font: bold 12pt Verdana;
    color: #82a749;
    border-bottom: solid 1px #000080;
  }

    h2 .headerLeft {
      width: 50px;
      background: transparent url(./headerBulletLeft.gif) no-repeat 25px 4px;
    }

    h2 .headerRight {
      width: 25px;
      background: transparent url(./headerBulletRight.gif) no-repeat 10px 4px;
    }
</style> </head> <body> <h2><span class="headerLeft"></span>Lorem Ipsum<span class="headerRight"></span></h2> <h2><span class="headerLeft"></span>Lorem<span class="headerRight"></span></h2> <h2><span class="headerLeft"></span>Lorem Ipsum Est<span class="headerRight"></span></h2> </body>

Thanks for the offer though. I don't think I'll mark it Solved just yet, in case there are more ideas.

chris.

erick295 · 10-May-2006, 11:37 PM #6

You did the right thing. A given element can only have one background image. If you try to put more than one background in an element, the latter declaration will override the former one. The only way to get another image inside of an element is to insert yet another element, as you've done with the spans.

Search
Search in:
Show Threads Show Posts
Advanced Search

Tag Cloud
acer blue screen boot bsod computer connection crash css dell display driver drivers email error ethernet excel firefox firefox 3 game hard drive hardware internet internet explorer itunes laptop linux malware monitor network networking outlook outlook 2003 outlook express partition password printer problem problems ram router slow sound trojan usb video virus vista windows windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)