I already posted this however I wanted to update my post and do not have enough points. 

I am working on preparing a website template which Is expected to be edited by various users (personalised). I load database data using the t-esc or t-field tags and the data is properly loading on the page.

My issue is that I have a large html block with a background image which I can edit using Odoo's website builder. If I put a div inside this <section/> that contains any t-esc or t-if or t-field the page renders perfectly however I can no longer modify the background image.

Is there any way around this? Currently I have to remove the child block, save it. Modify the image. And then put the child block back. But that is a hassle and not something that will be very user friendly.

Thanks ! 

<openerp>
 <data>
  <template id="addon_name.template_name" name="Template Name" page="True">
   <div class="oe_structure">
    <t t-call="website.layout">
     <div id="wrap">
      <div class="oe_structure">
       <section class="oe_custom_bg oe_img_bg" style="background-size: 100% 100%; background-position: 50% 50%; background-repeat: no-repeat; background-image: url(/addon_name/static/src/img/image.png); min-height: 700px;">
        <div class="oe_structure">
           <t t-if="o and o.attribute">
               <h1>
            <t t-esc="o.attribute"/>
               </h1>
           </t>
           <t t-else="">
               <h1>Place holder here</h1>
           </t>
                      </div>
       </section>
      </div>
     </div>
    </t>
   </div>
  </template>
 </data>
</openerp>

The above code works however I can not use the Odoo Website tools to modify the background image. If I remove the "t-" tags the Odoo website builder tools are functional again.