CODEWITHSUNDEEP
javascripthtmlcss
hihihihi
hihihihi

Reputation: 88

Make the background image in DIV responsive

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;
}
}

Upvotes: 3

Views: 338

Answers (1)

Farhad
Farhad

Reputation: 4181

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

Upvotes: 1

Related Questions