www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS3 - problem with multiple backgrounds

  1. #1
    Join Date
    Oct 2010
    Posts
    4

    CSS3 - problem with multiple backgrounds

    Hello and thank you for (hopefully) helping me out

    For the last 5 hours I've been banging my head against the keyboard without finding a solution to the following problem:

    On the test page here: http://test.neys.dk/ you can see how the background is supposed to behave.

    On the page I'm working on here, you can see how it's not behaving as it should.

    This is the identical CSS used on both pages to position the backgrounds:
    Code:
    body {
       background-repeat: no-repeat;
       background: url(img/bg_top.jpg) center 0 no-repeat,
                        url(img/bg_mid2.jpg) center 383px no-repeat,
                        url(img/bg_bot.jpg) center bottom no-repeat;
       background-color: black;
    }
    Basically I need the "bg_bot.jpg" to be at the bottom of the page at all times, no matter the height of the page, which is what is happening on the test page.

    I guess it has to be another element in the CSS-file that is causing the problem, but I've tried to delete and change everything with no satisfying result.

    Really hope you can help me. If I need to explain anything better, please say so.

    Thank you.

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    What browser are you using? Both pages have the same background images applied for me in Firefox.

  3. #3
    Join Date
    Oct 2010
    Posts
    4
    Hmm, you are right. Upon further checking it displays as it should in FF and IE9, but not in Chrome (which I primarily use because I've always thought the google-guys know what's up), Opera and Safari.

    Anyone know if this is a known bug or there's a workaround?

    I'm still thinking it's my code that's wrong and not chrome, opera and safari's interpretation ...

  4. #4
    Join Date
    Jul 2006
    Posts
    207
    It looks like you just need to set a min-height of about 1400px on the #container DIV.

  5. #5
    Join Date
    Oct 2010
    Posts
    4
    Thank you for your reply

    This indeed does help, as the bottom background image is now at least displayed at the bottom.

    However it's still not 100% correct, because if I do this the footer will not be placed on the same y-pixel as the bottom background image, but I guess it's better that the image is there in all browsers instead of just FF and IE9 ...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles