to add full width hero images to drupal theme omega 3

page-tpl.php

<!--marisa custom sub hero if statements 
place in between slideshow and panel_fullwidth
-->  
    
      <?php /* Custom Work: Sub Page Hero */ 
  if(isset($node->type) && $node->type == 'page'){
  $field_basic_hero_image = field_get_items('node', $node, 'field_basic_hero_image');
  $hero_url = file_create_url($field_basic_hero_image[0]['uri']);
  
  }?>

  <?php if ($field_basic_hero_image): ?>
  <section id="sub-hero" class="sub-hero section" style="background-image:url('<?php print render($hero_url); ?>');">  
    <div id="sub-hero-inner" class="sub-hero sub-hero-inner">

	    <div class="container">
			<?php if ($title): ?>
			<?php print render($title_prefix); ?>
			<?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
			<?php print render($title_suffix); ?>
			<?php endif; ?>
	    </div>
-->
    </div>
  </section>

  <section id="main" class="main section">	
    <div class="container">

	  <?php if ($breadcrumb): ?>
		<div id="breadcrumb" class="breadcrumb-outer">
			<div class="breadcrumb-inner">
				<?php print $breadcrumb; ?>
			</div>
		</div>
	  <?php endif;?>
    
      <div class="row">
        <div class="col-lg-<?php print $regions_width['content']?> col-md-<?php print $regions_width['content']?> col-sm-12 col-xs-12">
          <div id="content" class="column">     
	          
		   
            
            <?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
            <a id="main-content"></a>

            <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
            <?php print render($page['help']); ?>
            <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
            <?php print render($page['content']); ?>
          </div>
        </div>
        <?php if ($regions_width['sidebar_first']): ?>
          <aside id="sidebar-first" class="sidebar col-lg-<?php print $regions_width['sidebar_first']?> col-md-<?php print $regions_width['sidebar_first']?> col-sm-12 col-xs-12">
            <div class="section">
              <?php print render($page['sidebar_first']); ?>
            </div>
          </aside>
        <?php endif; ?>
        <?php if ($page['sidebar_second']): ?>
          <aside id="sidebar-second" class="sidebar col-lg-<?php print $regions_width['sidebar_second']?> col-md-<?php print $regions_width['sidebar_second']?> col-sm-12 col-xs-12">
            <div class="section">
              <?php print render($page['sidebar_second']); ?>
            </div>
          </aside>
        <?php endif; ?>
      </div>
    </div>
  </section>
  
<?php else:?>

  <section id="sub-hero-empty" class="sub-hero empty section">  
    <div id="sub-hero-inner" class="sub-hero sub-hero-inner">
    </div>
  </section>
  <section id="main" class="main section">	
    <div class="container">

	  <?php if ($breadcrumb): ?>
		<div id="breadcrumb" class="breadcrumb-outer">
			<div class="breadcrumb-inner">
				<?php print $breadcrumb; ?>
			</div>
		</div>
	  <?php endif;?>
    
      <div class="row">
        <div class="col-lg-<?php print $regions_width['content']?> col-md-<?php print $regions_width['content']?> col-sm-12 col-xs-12">
          <div id="content" class="column">
	          

	            <?php if ($title): ?>
	              <?php print render($title_prefix); ?>
	              <?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
	              <?php print render($title_suffix); ?>
	            <?php endif; ?>
            
            <?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
            <a id="main-content"></a>

            <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
            <?php print render($page['help']); ?>
            <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
            <?php print render($page['content']); ?>
          </div>
        </div>
        <?php if ($regions_width['sidebar_first']): ?>
          <aside id="sidebar-first" class="sidebar col-lg-<?php print $regions_width['sidebar_first']?> col-md-<?php print $regions_width['sidebar_first']?> col-sm-12 col-xs-12">
            <div class="section">
              <?php print render($page['sidebar_first']); ?>
            </div>
          </aside>
        <?php endif; ?>
        <?php if ($page['sidebar_second']): ?>
          <aside id="sidebar-second" class="sidebar col-lg-<?php print $regions_width['sidebar_second']?> col-md-<?php print $regions_width['sidebar_second']?> col-sm-12 col-xs-12">
            <div class="section">
              <?php print render($page['sidebar_second']); ?>
            </div>
          </aside>
        <?php endif; ?>
      </div>
    </div>
  </section>
  
 <?php endif;?>

  

  <?php if($banner = render($page['banner'])): ?>
    <section id="banner" class="section">
      <div class="container-fluid">
        <?php print render($page['banner']); ?>
      </div>
    </section>
  <?php endif;?>

  <?php if ($messages): ?>
    <section id="messages" class="message section">
      <div class="container">
        <?php print $messages; ?>
      </div>
    </section>
  <?php endif;?>

  <?php if($panel_notify = render($page['panel_notify'])): ?>
    <section id="panel-notify" class="section">
      <div class="container">
        <?php print $panel_notify;?>
      </div>
    </section>
  <?php endif; ?>
<!-- end sub hero if statements -->

subhero.css

/*-------------------------------------------
Panel Hero Sub Page (allowing for hero) mgp
-------------------------------------------*/
section#sub-hero {
	width: 100%;
	height: 100%;
	max-height: 640px;
	background-position: top center;
	background-size: cover;
	overflow: hidden;
	}
   
section#sub-hero-empty {
    display:none;
}
div#sub-hero-inner {
    width: 1170px;
    background-position: top center;
    background-size: cover;
    padding-top: 33.3333%;
    position: relative;
    margin: 0 auto;
}
@media (max-width: 1200px){
div#sub-hero-inner {
    width: 970px;
}
}
@media (max-width: 990px){
div#sub-hero-inner {
    width: 750px;
}
}
@media (max-width: 800px){
div#sub-hero-inner {
    height: 330px;

}
}
div#sub-hero-inner .container {
    margin: 0 auto;
    padding:0;
    width: 1170px;
    bottom: 0;
    position: absolute;
}
.sub-hero h1 {
    margin: 0;
    padding: 0;
    font-family: "Crimson Text", Georgia, serif;
    color: #f4f2e8;
    font-size: 132px;
    font-weight: 600;
    text-align: left;
    text-transform: capitalize;
    line-height: 1.4;
    border: none;
}	
@media (max-width: 1200px){
.sub-hero h1 {
    font-size: 112px;
}	
}
@media (max-width: 990px){
.sub-hero h1 {
    font-size: 92px;
}	
}
@media (max-width: 800px){
.sub-hero h1 {
    margin: 0 0 0 10px;	
    font-size: 72px;

}	
}


@media (max-width: 990px){
	.not-front #main .row {
		display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        
}
.col-lg-9.col-md-9.col-sm-12.col-xs-12.with-hero {
        -webkit-box-ordinal-group: 1;  
        -moz-box-ordinal-group: 1;     
        -ms-flex-order: 1;
        -webkit-order: 1; 
        order: 1;
    }
    aside#sidebar-first {
        -webkit-box-ordinal-group: 2;  
        -moz-box-ordinal-group: 2;     
        -ms-flex-order: 2;
        -webkit-order: 2; 
        order: 2;
    }
}

Must add fields to page and set as hidden under content > basic page > manage fields and > manage display. Field type is image. For my own personal reference, it's: https://bscmd.jweb1.jvillage.net/admin/structure/types/manage/page/fields