There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
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
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
Solved: Multiple backgrounds for single element


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

Closed Thread
 
Thread Tools
cristobal03's Avatar
Distinguished Member with 2,992 posts.
 
Join Date: Aug 2005
Experience: Advanced
09-May-2006, 12:36 PM #1
Solved: Multiple backgrounds for single element
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.
Attached Thumbnails
solved-multiple-backgrounds-single-element-sample.gif  
WendyM's Avatar
Distinguished Member with 2,533 posts.
 
Join Date: Jun 2003
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's Avatar
Distinguished Member with 2,992 posts.
 
Join Date: Aug 2005
Experience: Advanced
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's Avatar
Computer Specs
Distinguished Member with 17,888 posts.
 
Join Date: Jul 2001
Location: Mexico of the North, MN
Experience: Disenfranchised American Male
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's Avatar
Distinguished Member with 2,992 posts.
 
Join Date: Aug 2005
Experience: Advanced
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's Avatar
Distinguished Member with 2,156 posts.
 
Join Date: Mar 2005
Location: Atlanta, GA
Experience: Advanced
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.
Closed Thread

THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
WELCOME TO TECH SUPPORT GUY! Are you looking for the solution to your computer problem? Join our site today to ask your question -- for free! Our site is run completely by volunteers who help people like you solve computer problems. See our Welcome Guide to get started.



Thread Tools


You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 04:06 PM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.