> For the complete documentation index, see [llms.txt](https://owwwlab.gitbook.io/chaos-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://owwwlab.gitbook.io/chaos-docs/els/sections-with-bg.md).

# Extended backgrounds

If you want to extend the background of a column to the right of left, then you should read this page

Example:

![](/files/-LLV0BYfq6_X_x6BN5UV)

```
<section class="section pad-0">
  <div class="container">

    <div class="row extend-bg-wrapper">

      <div class="col-md-6">
        <div class="extend-left set-bg">
        <img src="../../assets/img/backgrounds/12.jpg" class="set-me"></div>
      </div>

      <div class="col-md-5 col-md-offset-1 p-top-50 p-bottom-50">
        <div class="tb-vcenter-wrapper">
          <div class="vcenter">
            --- contents of right side ---
          </div>
        </div>
      </div>

    </div>

  </div>
</section>
```

* The section should get a `.pad-0` class to remove the paddings
* add `.extend-bg-wrapper` class to `.row` div
* use `.set-bg` asset to make the image at the background of the column
* add `.extend-left` ( alternative is `.extend-right`) to extend the column to right
* add paddings to the column with your contetnt.
* The height of the section will be the same heigh of your content.

Alternatively, you can specify the height of the section

```
<div class="row extend-bg-wrapper h-600">
```