Make the background image in DIV responsive

Question

I want my background image to become responsive inside a div. It has a parallax effect when scrolled. I already tried to customize the background in the media queries but no hope it only adjust the height and doesn't contain the whole page when in mobile devices width. Can someone give me a clue to solve this? Im new to html and css.

html code for div:

<div class="parallax"></div>

css code:

.parallax { 
    height: 502px;
    background-image: url(../img/back2.png);
    background-attachment: fixed;
    background-position: -70px 80px;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (min-width: 270px) and (max-width: 320px){ 
.parallax { 
    max-height: 300px;
    background-image: url(../img/back2.png);
    background-attachment: fixed;
    background-position: -70px 40px;
    background-repeat: no-repeat;
    background-size: cover;
}
}

Answer 1

You should use property: background-size:100% auto;

If the width property is set to 100%, the image will be responsive and scale up and down.

please see this link for more info: w3schools