WEB double background (repeat-x and repeat-y)

Discussion in 'OT Technology' started by Oh its me 20, Apr 3, 2009.

  1. Oh its me 20

    Oh its me 20 New Member

    Joined:
    Sep 11, 2007
    Messages:
    1,042
    Likes Received:
    0
    Is there a way to do this?

    Basically I have a background that I want to repeat horizontally across the page. On top of that background I have a transparent glow that I want to repeat vertically down the page.

    Is there a way to do this?


    Basically.....

    ^
    |
    |
    <----------background1-------------->
    |
    |
    |
    |
    background 2
    |
    |
    |
    V
     
  2. jizzmo

    jizzmo New Member

    Joined:
    Jul 9, 2008
    Messages:
    1,336
    Likes Received:
    0
    post the two images and we might be able to manipulate them via photoshop so you only require one image.
     
  3. nida

    nida Guest

    ... that'll look dumb. honestly
     
  4. LowClass

    LowClass New Member

    Joined:
    Sep 5, 2007
    Messages:
    890
    Likes Received:
    0
    Location:
    USA
    uhh you want one image repeating down and one across? or do you want a tiled background?
     
  5. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,329
    Likes Received:
    76
    Location:
    Tasmania
    HTML (obviously do it properly, just giving an example):

    Code:
    <html>
    <body>
    <div id="wrapper">
    Site content here.
    </div>
    </body>
    </html>
    
    CSS:
    Code:
    body { margin: 0; padding: 0; background: url(whatever.jpg) 0 0 repeat-x }
    #wrapper { background: url(whatever2.jpg) 0 0 repeat-y }
    
     
  6. Oh its me 20

    Oh its me 20 New Member

    Joined:
    Sep 11, 2007
    Messages:
    1,042
    Likes Received:
    0
  7. Phasm

    Phasm OT Supporter

    Joined:
    Sep 20, 2005
    Messages:
    9,680
    Likes Received:
    0
    Location:
    Michigan
    you just make the body background the outer glow portion aka "y repeat"
     
  8. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,329
    Likes Received:
    76
    Location:
    Tasmania
    I already answered it above.

    Have the blue horizontal fade as a BODY bg.. have the content side-fades as an alpha-transparent PNG assigned to a wrapper DIV.
     

Share This Page