Stop wide image from producing horizontal scrollbar

css, html

Solution

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

Problem

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

Original source

Related problems