<div ui-layout class="layout-mock">
  <header class="north-back"></header>
  <ui-layout options="{ flow : 'column' }">
    <sidebar class="east-back"></sidebar>
    <div class="center-back"></div>
    <sidebar class="west-back"></sidebar>
  </ui-layout>
  <footer class="south-back"></footer>
</div>

.layout-mock *:not(.ui-splitbar){
  background : #eee no-repeat center;
}


.layout-mock .center-back{
  background-image: url("http://placehold.it/400x300/eee/666&text=CENTER");
}
.layout-mock .north-back{
  background-image: url("http://placehold.it/400x300/eee/666&text=NORTH");
}
.layout-mock .south-back{
  background-image: url("http://placehold.it/400x300/eee/666&text=SOUTH");
}
.layout-mock .east-back{
  background-image: url("http://placehold.it/400x300/eee/666&text=EAST");
}
.layout-mock .west-back{
  background-image: url("http://placehold.it/400x300/eee/666&text=WEST");
}