How to stop image shrinking when page is resized horizontally in CSS

alignment, centering, css, html

Solution

With CSS

div {
  background: url(./Resources/Images/banner.jpeg) no-repeat scroll center top transparent;
  height: 100px;
}

Problem

I have a 1920x100 image which is inserted at the top of my page: ``` <img src="./Resources/Images/banner.jpeg" style="position:absolute; top:0px; left:0px; height:100px; width:100%;" name="top"> ``` 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: It seems like a simple thing that could be easily achieved, but I haven't found a solution. 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. Is there any CSS property I could use to achieve this, or am I going the completely wrong way of achieving this? Any help appreciated.

Original source