Displaying a full page width section using a fluid field

I have a site where there are several sections on a page and each section has different color background. The background has to go the full width of the page but the content needs to be contained to the center of the page. I am trying to use fluid fields to allow the user the ability to order the sections as they se fit but I can’t figure out a way to know what html to wrap each section in.

So in the example below I need to be able to change the class “background-color” based on what the user choses. And the content inside of “container” are different fields in the fluid field. There would be multiple “background” sections on the page and the user needs to be able to select the order of them.

Thank you for any help.

<div class="background background-color">
    <div class="container">
        <h1 class="title">Title of section</h1><!-- /.title -->
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni obcaecati vitae iste iure veritatis. Nulla sit distinctio laboriosam corrupti mollitia soluta, iusto ipsum esse dolorum, amet veniam omnis molestias a.
    </div><!-- /.container -->
</div><!-- /.background background-color -->

NOTE: the lorem ipsum is suppose to be wrapped in a paragraph tag but it is being stripped out.