Minimal code

<div ui-layout class="layout-mock">
  <div class="center-back"></div>
</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");
}

Holy grail demo

 
<div ui-layout class="layout-mock">
  <header class="north-back"></header>
  <ui-layout options="{ flow : 'column' }">
    <sidebar class="west-back"></sidebar>
    <div class="center-back"></div>
    <sidebar class="east-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");
}

Initial size demo

<div ui-layout class="layout-mock">
  <header ui-layout-container class="north-back"></header>
  <div ui-layout-container class="center-back" size="10%"></div>
  <footer ui-layout-container >
    <div ui-layout="{ flow : 'column', sizes: [ '300px' ] }" >
      <div ui-layout-container class="west-back"></div>
      <div ui-layout-container class="south-back"></div>
      <div ui-layout-container size="100px"></div>
    </div>
  </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 .west-back{
  background-image: url("http://placehold.it/400x300/eee/666&text=WEST");
}