SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict drjones013's Avatar
    Join Date
    Jan 2007
    Location
    Las Vegas, NV
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Noob background question: Just one?

    Is it possible to place two background images in a single div? or do they need to be in separate divs?

  2. #2
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whatever background image you specify last for the div will overwrite the first one.

    ...What you could do is have another div wrapping the original one, and place your background images on each and position them accordingly.

    hope that helps
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  3. #3
    SitePoint Addict drjones013's Avatar
    Join Date
    Jan 2007
    Location
    Las Vegas, NV
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... yeah, it sounds like that'll work.

    I have to wonder why something better wasn't released in CSS2 but that's a different story-- hacks away and thank you much!

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, multiple background images on single elements are supported, but only by Safari (it's CSS 3). We'll have to wait for the rest of the world to catch up.

    In the meantime we have to make due with using either the available markup we already have (which involves some creative styling), or adding extra markup (which we should all avoid whenever possible).

  5. #5
    SitePoint Addict drjones013's Avatar
    Join Date
    Jan 2007
    Location
    Las Vegas, NV
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good to hear that it's been done... is there any hope for CSS 3 becoming standard?

  6. #6
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mr Blonde View Post
    ...What you could do is have another div wrapping the original one, and place your background images on each and position them accordingly.
    Works quite well... had to do this very thing last night - needed a page to have 2 background images - positioned in 2 different areas - just placed an extra 'outer' wrapper div and it worked fine

    Nadia

  7. #7
    SitePoint Addict drjones013's Avatar
    Join Date
    Jan 2007
    Location
    Las Vegas, NV
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So basically <div class="outer"><div class="upperleft"></div><div class="upperright"></div></div>?

    Hmm... I suppose that's semantically correct and it beats the alternative of simply congealing my background images.

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by drjones013 View Post
    So basically <div class="outer"><div class="upperleft"></div><div class="upperright"></div></div>?

    Hmm... I suppose that's semantically correct and it beats the alternative of simply congealing my background images.
    That's not semantic.. divs, spans for background images should be as few as possible.

    You have three elements in that code snippet - do you need three images?
    If you only need two then
    <div class="top"><span></span></div>
    would be more appropriate.

    This might give you a couple of ideas on the markup you should use

  9. #9
    SitePoint Addict drjones013's Avatar
    Join Date
    Jan 2007
    Location
    Las Vegas, NV
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That sounds a bit better-- so I'd basically build it like this:
    Code:
    /*
    .background {
    }
    #logo {
    }
    */
    <div class="background">
    <span id="logo"></span>
    </div>
    Is that right?

    Off Topic: I've never found a good written source for "web semantics;" is there a book (not a web article, but an actual textbook I could carry around) that explains what the original intention of certain tags are? The project at work is almost done but I could certainly apply that to hobby projects.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •