Fixed background cover becomes zoomed in mobile view

Question

I'm using a fixed background cover for my website here: http://www.datisdesign.com

Every page has a big header image, but in small devices such as mobiles, the cover image becomes so large. I want to make it smaller in mobile devices.

This the code that I'm using:

#takelessons {
    background: url(../img/portfolio/takelessons-intro.jpg) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
}

Answer 1

I solved my problem by limiting the capability to the large tablet screen size.

@media screen and (max-width: 992px) {
    #parallax {
        background-attachment: scroll;
    }
}