two css header images, one repeating, one finishing

Discussion in 'CSS' started by bsimecek, Sep 11, 2012.

0
  1. #1
    I am still learning css and I have the following line that will create a header with no ending image...

    #header {position:relative;background:#fff url(../images/header.gif) repeat-x 0 100%}

    Now i want to add a ending image on this to make the complete header, but the following try doesn't work...

    #header {position:relative;background:#fff url(../images/header.gif) repeat-x, url(../images/headerend.gif) no-repeat;}

    Am i missing something?

    Here are my references...

    http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css
    http://icode4you.net/css-tricks-use-two-background-images-for-one-div
     
    bsimecek, Sep 11, 2012 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    CSS3 does allow for it, but to be honest I still wouldn't deploy that way -- I'd break down and throw an extra element to receive that background instead.... like a DIV or SPAN.

    Or maybe see if there's some other element already on the page that you could target for it... like say the H1 inside that DIV#header... though most of the time that's why I don't waste a DIV around header elements... plenty of perfectly good elements inside it, why do we need a wrapper?
     
    deathshadow, Sep 12, 2012 IP
  3. bsimecek

    bsimecek Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Is there a reason why that line of code doesn't work?
     
    bsimecek, Sep 12, 2012 IP
  4. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #4
    If you are looking at it with IE8 or earlier it won't work because multiple backgrounds are not supported on old junk. If you are looking at it in IE9 it might still not work if you are not using a strict doctype.


    It is not a good idea to use multiple backgrounds anyway.
     
    COBOLdinosaur, Sep 13, 2012 IP
  5. Gigaports

    Gigaports Peon

    Messages:
    44
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    solution is simple:
    #header {
    width: 850px;
    height: 120px;
    background: #FFF url(header.jpg) repeat-x;
    }

    .header2 {
    background: url(header2.jpg) no-repeat;
    }

    ON HTML BODY:

    <div id="header" class="header2"></div>

    OR

    <div id="header">
    <div class="header2"></div>
    </div>
     
    Last edited: Sep 13, 2012
    Gigaports, Sep 13, 2012 IP