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:
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.
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;
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.
What browser are you using? Both pages have the same background images applied for me in Firefox.
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 ...
It looks like you just need to set a min-height of about 1400px on the #container DIV.
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 ...
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)