title: CSS How to make image fluid extending only to one side of browser, aligned with centered content?
body: <p>I currently don't have code to show as an example because I been trying to make this work but not even coming close to making it work as expected. I can't show the images because of an NDA. So will describe the best I can.</p>
  
  <p>Basically:</p>
  
  <ol>
  <li><p>I have a logo image inside of a div. The div has margin:0 auto; so it is centered in the browser. </p></li>
  <li><p>I have a "Arrow" png image with transparent background that needs to be flushed against the right side of the browser. </p></li>
  <li><p>The catch is, No matter how wide you make the browser window, I need the arrow tip to stay next to right side of the logo with the tail of the arrow still being flushed against the right side of the browser.</p></li>
  <li><p>The content of the page will be centered as well. Just in case this info was needed.</p></li>
  </ol>
  
  <p>Basically I need the arrow to resize to the browser width, but make sure the arrow tip is always pointing at the logo.</p>
  
  <p>All my attempts makes the div too big, causing the logo to just be flushed all the way to the left and not centered.</p>
  
  <p>I understanding that may consist of the arrow being sliced into two images, but even then I am still confused on to how I can make this actually work. Starting to think it isn't something that is possible.</p>
  
  <p>Here is an image to explain, I am sure once I figure out how to do the top arrow arrow I can get the bottom arrow. The bottom arrow is slightly different because the arrow tip may be at different places depending on the page.</p>
  
  <p><img src="https://imgur.com/Zox5v.png" alt="sample design"></p>
  
  <p><strong>FINAL Update: Using the Advice from Max</strong></p>
  
  <p>Note: I only tested it on chrome, firefox and safari, all recent versions as of this post. Not sure what issues I will run into with other versions or IE.</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="header-wrapper"&gt;
  
    &lt;div class="header"&gt;
     &lt;img src="images/logo.png" /&gt;
    &lt;/div&gt;
    &lt;div class="arrow-wrapper"&gt;
     &lt;div class="arrow-tail"&gt;&lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS Code</p>
  
  <pre><code>.header-wrapper{
      position:relative;
      width:100%;
      overflow:hidden;
  }
  
  .header {
  
     position: relative;
      z-index: 10;
      height: 69px;
      margin: 0 auto;
  }
  
  .arrow-wrapper {
      z-index: 5;
      background:url(../images/arrow_tip.png) no-repeat top left;
      width: 50%;
      position: absolute;
      left: 50%;
      top: 18px;
      padding: 0 0 0 120px; 
      height:23px;
      margin-left:140px;
  }
  
  .arrow-tail{
      background:url(../images/arrow_tail.png) repeat-x top left;
      height:23px;
      width:100%;
  }
  </code></pre>