title: How to stop image shrinking when page is resized horizontally in CSS
body: <p>I have a 1920x100 image which is inserted at the top of my page:</p>
  
  <pre><code>&lt;img src="./Resources/Images/banner.jpeg" style="position:absolute; top:0px; left:0px; height:100px; width:100%;" name="top"&gt;
  </code></pre>
  
  <p>I'd like to have it so that when the page is resized horizontally, the image doesn't shrink with the page, but instead remains in the center of the screen, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/nNMBQ.png" alt="enter image description here"></p>
  
  <p>It seems like a simple thing that could be easily achieved, but I haven't found a solution.</p>
  
  <p>I could put the image inside a div and set the left position of the div to be -(1920-pageWidth) / 2, but this would rely on JavaScript. I'm looking for a cleaner solution (if there is one), just to minimize complexity on the page, and maximize browser compatibility.</p>
  
  <p>Is there any CSS property I could use to achieve this, or am I going the completely wrong way of achieving this?</p>
  
  <p>Any help appreciated.</p>