…where the rain gets in \ and stops my mind from wandering…
While working on a new design for the CAS login page I ran across a bug where a background imagine would not properly attach itself to the bottom of a screen. The odd thing was that the rendering error only appeared in Firefox.
This bug also affects the CSU Chico home page.
After some research, I discovered that I had omitted the background-attachment property for the body tag. By default the attachment is set to scroll and by simply defining the attachment as fixed, I was able to cure the Firefox bug (which may have actually be an all other browsers are broke bug).
Original Code
- body {
- background-color: #999;
- background-image: url(/images/bkg-body.jpg);
- background-repeat: repeat-x;
- background-position: bottom;
- }
Fixed Code
- body {
- background-color: #999;
- background-image: url(/images/bkg-body.jpg);
- background-repeat: repeat-x;
- background-position: bottom;
- background-attachment: fixed;
- }
So to the unsung maintainer of the CSS code base for the CSU Chico homepage, if you’re curious why this is happening, here’s the solution.