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

Question

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.

Answer 1

With CSS

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