Search code examples
csspositioning

CSS background image larger than window buggy

I have a weird issue that's probably more of a bad coding than anything else.

Basically, I have this site where if you resize your browser just around the size of the website, you will see that you can scroll right. This is because I have a <div> with the position: absolute on the right side of the site with a width and height that seems to "push" the website outside of the window and if you scroll, you'll see that the top part of the site don't respect my width:100%.

If you understand my explanation, could you tell me what is the right way to code this?

Solution

  • Add the overflow-x: hidden; to the body id in css

    it's a good way to hide that scroll bar and keep those images aside. your body css will look like this

    body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    margin:0;
    padding:0;
    background-image: url(images/bckpattern.gif);
    background-repeat: repeat;
    overflow-x: hidden;
}