disable vertical scrolling on a div/img

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>

I came looking for "disable vertical scrolling" and you say *"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"*. So I edited the title to "disable horizontal" instead of "disable vertical". But then I tried overflow-y and overflow-x on a div I was working with and got unexpected results, so perhaps I am missing something...? So I changed it back. *I should know better than to try and meddle in CSS questions. :-)* — HostileFork says dont trust SE, Apr 07 '14 at 07:03

score 7 · Accepted Answer · edited Nov 18 '14 at 17:50

7

You will need to use CSS for that.

div {
    overflow-x: hidden;
}

edited Nov 18 '14 at 17:50

b4hand

9,550
4
44
49

answered Sep 12 '13 at 17:15

user1

1,063
1
8
28

Can you also suggest me how to center the image that the left side disappears when the browser width gets too small? The right side works fine now! – Nils Ziehn Sep 12 '13 at 17:28

score 2 · Answer 2 · answered Aug 31 '16 at 13:38

2

Try position: fixed; This fixes the position and doesn't allow any scrolling

answered Aug 31 '16 at 13:38

bourax webmaster

748
7
18

1

This is not a good solution, with position fixed, you will not be able to get the div out of your screen without js. – Idris Dopico Peña Aug 11 '17 at 16:16

score 1 · Answer 3 · answered Sep 12 '13 at 17:15

1

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.

answered Sep 12 '13 at 17:15

Darren Crabb

570
2
10

Yeah, display it has a background image. – Milche Patern Sep 12 '13 at 17:18
Although this works on an image, I prefer the answer by user1 which also works on any div. But thx for your answer! – Nils Ziehn Sep 12 '13 at 17:20

Brent Stees · Answer 4 · 2019-12-04T17:21:11.207

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>

disable vertical scrolling on a div/img

4 Answers4

Linked