Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2004
    Location
    maine/RIT
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question two background images

    I don't know if this is possible, but i want to use two images as a background-image. I need two borders at the top and the bottom to match the tables within, and i can't just use one image with the apporite height settings, becasue IE and FF have different BR sizes ect.

    so is there any way i can get one image to be the background to repeat at the top, and the other to do the same at the bottom?

    thanks.
    :)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You would need to set a background to the body and then use a containing div and set the background of that.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could try setting one for the html and body (I'm sure I've seen this work, but don't quote me on that!).

    html { background: url(1.jpg) top no-repeat }
    body { background: url(2.jpg) bottom no-repeat }

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The css 3 specification defines that it is possible to load more then 1 image. But since current browsers don't support this, you'll have to use nested div's. Or you could go and use the reommended tbody element and put a background on that too I guess.

    by the way, for the br, you should set that with lineheight. eg

    body {line-height: 1.5em;}
    CATdude about IE6: "All your box-model are belong to us"

  • #5
    New Coder
    Join Date
    Feb 2004
    Location
    maine/RIT
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the help, but i can't seem to get it to work.

    can you give me an example of what you mean?
    [i prefer using div's]
    :)

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    .theimage1 { background: url(image1.jpg) no-repeat top left }
    .theimage2 { background: url(image2.jpg) no-repeat bottom right }
    Code:
    <div class="theimage1"><div class="theimage2">Nesting.</div></div>
    It isn't very elegant, I know.
    CATdude about IE6: "All your box-model are belong to us"

  • #7
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by mrruben5
    The css 3 specification defines that it is possible to load more then 1 image. But since current browsers don't support this, you'll have to use nested div's. Or you could go and use the reommended tbody element and put a background on that too I guess.
    Safari 1.3 and 2.0 support multiple backgrounds.
    Last edited by gsnedders; 08-27-2005 at 12:28 AM.

  • #8
    New Coder
    Join Date
    Feb 2004
    Location
    maine/RIT
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks!
    :)


  •  

    Posting Permissions

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