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.
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 ...
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 ...
Bookmarks