Question

When I do the following code, it works up until the point where i resize the page, the background image stars to repeat, even thought background-repeat is set to none. Any reason for this, you can view the page live here

#mainPage{
    background-image: url(../images/home.JPG);
    width: 100%;
    height: 500px;
    background-size: 100%;
    background-repeat: none;
}

Answer 1

It’s no-repeat, not none:

#mainPage{
    background-image: url(../images/home.JPG);
    width: 100%;
    height: 500px;
    background-size: 100%;
    background-repeat: no-repeat;
}

Whether or not you set background-size shouldn’t make a difference.