Stop wide image from producing horizontal scrollbar

Question

On a webpage I have a wide image, which should take up the right 50% of the screen. It appears as I want it to, but it produces an unwanted horizontal scroll bar. I don't want the image to scale down, I want it to remain looking exactly as it does, but to not produce a horizontal scroll bar. How could I do this?

HTML:

<div class="image">
</div>

CSS:

.image {
    position:absolute;
    left:50%;
    background-image: url('Images/banneriPhone.png');
    width:774px;
    height:759px;
}

EDIT: I had some suggestions that i remove the overflow option. This didn't work, so i changed the code around (put the image in the html) but this still didn't work. Here's the CSSDesk link:

http://cssdesk.com/mqZpC

DominikAngerer · Accepted Answer · 2013-05-04T13:27:45.920

5

Use this in your CSS to hide the scrollbar of the CSS class image:

.image {
    position:absolute;
    left:50%;
    background-image: url('Images/banneriPhone.png');
    width:774px;
    height:759px;
    overflow-x:hidden;
    overflow-y:hidden;
}

overflow-x will hide the horizontal scrollbar

overflow-y will hide the vertical scrollbar

Edit: Here you can see some example of the overflow property: http://www.brunildo.org/test/Overflowxy2.html

edited May 04 '13 at 13:27

answered May 04 '13 at 12:06

DominikAngerer

6,354
5
33
60

1

This hasn't worked. The scrollbar is still there unfortunately. – Andrew May 04 '13 at 12:34
Is there a div around this div with a max-width that is bigger then the 774px of the image div? – DominikAngerer May 04 '13 at 13:02
I made a prototype with this CSS - In my example there is no scrollbar - do you have any Example where we can see it? (not in CSSdesk because it's only in your Session when u make something in there - also there is sometimes the problem in CSSDesk) – DominikAngerer May 04 '13 at 13:22
"overflow-x: hidden" needs to be the style of the parent. – Chuan Jan 06 '22 at 22:26
@Chuan in the original code `.image` was reflecting a `div`. If you indeed place an actual `img` tag into that `div` it will work, if you will use a `div` and a background image it will work too (as in the original post) without a parent div. If, however, you apply the style to an `img` you will need a parent container. correct. I would recommend `
` rather than inline style or applying it on the body itself. – DominikAngerer Jan 31 '22 at 22:54

score 1 · Answer 2 · edited May 20 '20 at 17:47

1

To remove the scrollbar on the image, I did the following and it worked. Add the below to your class where the image is on CSS:

overflow:hidden;

edited May 20 '20 at 17:47

David Buck

3,752
35
31
35

answered May 20 '20 at 15:02

user13582966

11
1

score 0 · Answer 3 · answered Jun 28 '13 at 16:26

Apply the following css rules on the element:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

And set your margins:

margin:0;

The paddings can be left intact because of the box-sizing rules (the padding is not included in the width of the image, which is probably set to 100%).

Stop wide image from producing horizontal scrollbar

3 Answers3

Linked