As we developed fluid layout, one of the bigger questions that had to be addressed was the behavior of the site background. We wanted to find a solution that wouldn’t make the creation of a background image more difficult, and would not force every single community to update their background when fluid layout was released to everyone. Below are some details about how the background will operate as the size of the screen (or browser window) increases.
These screen shots show the background of Muppet Wiki at a "medium" screen size, similar to how Wikia's fixed width looks today.
Add a photo to this galleryHere’s what happens as things get bigger – the background file is split down the center, at which point the solid background color (as set in Theme Designer) appears. A gradient transition is added between the image halves and the solid color. You can see that the edge of the content space’s background tracks consistently to the same places on the image background, as the size changes. (These images show the same background at the largest fluid size, 1270px wide.)
For some communities, choosing a solid background color that works well with the background image's color (like the example above) will be the best way to have a more "seamless" background experience in the small portion that shows below the Wikia header.
Another option may be to choose an image that holds up well when it's split. For example, with any color chosen (black, in the example below), Muppet wiki's background still gives the effect of a curtain "opening". If a skin design uses transparency in the content area, the entire background is visible most of the time, so careful image selection is even more important.
The background image will still be uploaded in the same way via Theme Designer. Some communities may not even need to update their background at all, if it’s an image that won’t look odd when it’s split down the middle.
Fixed backgrounds smaller than 1030px will not be split. The behavior for tiled backgrounds won’t change, and tiled may indeed be easiest solution for fluid backgrounds.
When the site/browser scales small enough to where no background is visible (as is the case on most tablets), the background image and stops being loaded altogether and the inner content area's background color takes over.
