Layered Background help

Discussion in 'CSS' started by GeorgeB., Nov 20, 2006.

  1. #1
    I'm trying to get these 2 backgrounds to show up but right now neither one is showing up.

    Here's the code I'm using

    body {
    margin:10 auto;
    font-size: 0.7em;
    font-family: Verdana, Arial, Sans-Serif;
    color: #333;
    text-align: left;
    background-color: #0254A7
    background-image: url("http://www.hoopstalk.net/images/new/background.jpg"), url("http://hoopstalk.net/images/teambanners/sixers.jpg");
    background-repeat: repeat-y, no-repeat;
    background-position: center, top;
    }



    Again the above code doesn't show ANY background. BUT according to this page it should work.

    Now the below code works and shows the 1 background image but I need to layer 2 backgrounds.

    body {
    margin:10 auto;
    font-size: 0.7em;
    font-family: Verdana, Arial, Sans-Serif;
    color: #333;
    text-align: left;
    background: #0254A7
    url("http://www.hoopstalk.net/images/new/background.jpg") repeat-t, center;

    }

    Can anyone help please?
     
    GeorgeB., Nov 20, 2006 IP
  2. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ok, it's quite simple, even that webpage states the reason, multiple backgrounds per element only works in CSS3, and specifically currently only in Safari. So you'll have to do this somehow else, by stacking two or more elements for example, or wait till all major browsers support CSS3 porperly, which might be a few years from now.

    edit - if you are doing this specifically for the newest Safri then add a ; after background-color definition.
     
    crazybjörn, Nov 20, 2006 IP
  3. GeorgeB.

    GeorgeB. Notable Member

    Messages:
    5,695
    Likes Received:
    288
    Best Answers:
    0
    Trophy Points:
    280
    #3
    stacking 2 or more elements?
     
    GeorgeB., Nov 21, 2006 IP
  4. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #4
    <body>
      <div id="something">
        <div id="somethingelse">
          etc.
        </div>
      </div>
    </body>
    Code (markup):
    And so on.
     
    crazybjörn, Nov 21, 2006 IP