I was working on making an existing client site responsive recently and encountered a CSS problem I am unable to find a good cross-browser solution to. The problem involves CSS background images and seemed simple at first, but it turned out otherwise.
The site I was working on was using a fixed width. One column had a coloured background extending all the way from the header to the footer, regardless of the amount of content. To achieve this, a background image was used (à la Faux Columns). I needed to make this flexible as part of the responsive remake.
Making the width flexible and changing the column widths from pixels to percentages has an interesting consequence when you use a background image to fake columns because of the way the background-position CSS property works when you use percent, i.e. background-position:40% 0.
Posted in CSS.
Copyright © Roger Johansson