Preparing your background for fluid layout

When the shift to a fluid layout was first announced, we also detailed how backgrounds would be treated in the new responsive design. That forum thread has screen shots that illustrate how a single-image background will be split in the center, in order to keep the visible portions aligned with the edges of a community's content area. Tiled background images will continue to behave in the same way they do now, since no split is needed with that option. These adjustments all happen automatically once fluid layout is enabled. So that's good news: you don't have to do anything to prepare your background for fluid layout! However, we received a number of questions and requests from some of the communities that use transparency in their site design. This makes sense, of course — if you've got a great background image that's visible behind the content area, you may not want it to be split down the middle. Or perhaps the split is no problem, but what if your chosen solid background color works well on the far edges of your image, but not in the middle? We're very happy to introduce some new options in Theme Designer that allow these scenarios to be addressed. These options are available once fluid layout is enabled on a community. <h3>"No split" option</h3> <figure class="article-thumb tright show-info-icon" style="width: 350px">

<figcaption> </figcaption></figure>The maximum fluid width for a community's content area is 1600px. A background image that won't be split needs to be even wider than that, in order to be visible on either side of the content. So the "no split" option for an image does not become available until you upload an image that's at least 2100px wide. This will ensure that there's always a decent amount of the background visible on the sides. With this option selected, the background image will remain static as the content area changes size. Or, to put it another way, the portion of the background that's covered will depend on the user's display size. <h3>Two background colors</h3> <figure class="article-thumb tright show-info-icon" style="width: 350px">

<figcaption> </figcaption></figure>If the central split isn't a problem, but you'd like the color inside the split to be different from the color beyond the outer edges of your image, you can do that! There are now two color selection areas available in Theme Designer. The "main" color will show beyond the sides of the image, and most of the bottom area as well. The "middle" color will be the same as the main color by default, but can be changed depending on your needs for the specific background image. One of the reasons we left time for user feedback was so that we could make changes like this, to help out communities with specific requirements. Thanks to everyone who brought these needs to our attention! If you’re an admin and you’d like some help preparing your community for fluid layout, let us know here. For more tips on getting ready for fluid layout, see also:

Preparing your main page for fluid layout
Fluid layout and custom CSS