Dual Background?

Discussion in 'Web Design and Development' started by Mal, Nov 21, 2006.

  1. Mal macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #1
    Ok, here's a random thought I had regarding CSS web design (not necessarily CSS, I guess, though that would be the method I use):

    Is there any way to have two background images, one of which repeats and the other which is static? Basically my thought is that you could have one image that forms a shell and a top design, and then the second could be a simply 1 pixel tall (or higher) image that repeats below the first for the rest of the page, no matter how long it gets. It would be an easy way to put rounded corners on a fixed width column, though only on the top corners (at the bottom the column would just end at the bottom of the page. I don't know if you can visualize it the way I am right now, but I'm seeing some pretty cool possibilities. Any ideas on a good way to make this work?

    The only way I can see to do a form of this is to have your container div have the non-repeating image as it's background, with the top, sides, and bottom all flush with the edge of the browser window, and then having the page background be the repeating image. It'd work alright, but it limits what you can do with the container div outside of that. I think.

    jW
     
  2. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #2
    I won't give you a direct answer, but instead a hint:

    You can style the BODY and HTML elements in many different ways...
     
  3. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #3
    Why must you insist on sounding like a teacher? :rolleyes: ;)

    I think I get what you're saying, and I think it's similar to what I was thinking, just said in a different way. Could you explain a little more specifically what you mean, however?

    jW
     
  4. Stampyhead macrumors 68020

    Stampyhead

    Joined:
    Sep 3, 2004
    Location:
    London, UK
    #4
    The HTML tag could contain a repeating image and the body tage could contain a static image. I believe that's what he is saying.
     
  5. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #5
    That, and the HTML tag can text-align center, the BODY tag can take on a width and auto margins so that you can have a centered site.
     
  6. radiantm3 macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #6
    You can attach 2 more images to an element using the :before and :after pseudo classes. The only downside is they don't show up in IE. This is probably the cleanest and most semantic way to create resizable rounded corner boxes.
     
  7. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #7
    I typically do something like this, but I attach the repeating background to the body and the top background to the header div.
     

Share This Page