Add an image value to put a background image in. This works best inside an o-wrapper--wide wrapper component, otherwise it will just fill the available wrapper.

To centre content in the o-grid__box within an image row, use the class name .o-grid__box--centred. This must be a full-width box.

.o-grid__box--full .o-grid__box--centred 
<div class="o-grid">
  <div class="o-grid__row o-grid__row--image" style="background-image:url(/media/wide-image.jpg);">
    <div class="o-grid__box o-grid__box--full o-grid__box--centred">
      .o-grid__box--full .o-grid__box--centred

    </div>
  </div>
</div>

Uses

This can be used to contain another grid, useful for separating the row in half/thirds/quarters.

.o-grid__box--third
.o-grid__box--third
.o-grid__box--third 
<div class="o-grid">
  <div class="o-grid__row o-grid__row--image" style="background-image:url(/media/wide-image.jpg);">
    <div class="o-grid__box o-grid__box--full o-grid__box--centred">
      <div class="o-grid">
        <div class="o-grid__row">
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
        </div>
      </div>

    </div>
  </div>
</div>