Question: I have a header on my website with a large image ( 1000px width ).
This image is centered (horizontally). If a user comes to this website with a browser window which is slimmer than 1000px in width, he can scroll horizontally. This is what I would like to prevent, since the outer parts of the image are not important and the rest of the page is as wide as the users browser window.

For instance:
A users browser window is 600px in width, what I would like to happen is:

The first 200px of the image are invisible, the next 600px are visible and the last 200px of the image are invisible again.

```
<html>
<body>
    <div id="outer" style="width:100%;overflow-x:hidden;">  
        <div id="inner" style="display: table;margin: 0 auto;width:1300px">
            <img src="image.jpg" alt="image" width="1300px">
        </div>
    </div>
</body>
</html>

```

Answer: 
Should work by itself if you just set it as a background image, centered. You'll need to put it on a div that has 100% width applied to it, and a height specified in order to expand the div to see anything.
You can do this with background-size: cover

css

```
main-page { // making a container for demonstration purposes
  display: block; // custom tags need a display, block forces 100% width
  max-width: 1000px; // just matching your image width
  margin: 0 auto; // centering if window is bigger than max-width
}

banner-image {
  display: block; // custom tag needs a display
  height: 80px; // set to the height of your image
  background:
    no-repeat
    url('https://www.w3schools.com/cssref/mountain.jpg')
    50% 50% / cover; // center then cover the element completely
  }

```

HTML note: I'm using custom tags

```
<main-page>
  <banner-image></banner-image>
</main-page>

```