I want to make div background image responsive

Question

This is my div tag background image code.

<div class="text-center paira-gap-2 paira-gap-1 position-r  parallax parallax-1527413728902" style="background: url(&quot;//cdn.shopify.com/s/files/1/0611/5003/6139/files/Home2_1659f2cd-aa5a-4d18-9a93-b5955c1ec056.png?v=1648657681&quot;) 50% 8px no-repeat fixed; height: 900px;">

If someone have solution let me know.

Answer 1

You can make use of background-size and set it to cover to span the entire div . In addition, I recommend, placing the background to the center:

div {
  background-size: cover;
  background-position: center;
}

<div class="text-center paira-gap-2 paira-gap-1 position-r  parallax parallax-1527413728902" style="background-url: url(&quot;//cdn.shopify.com/s/files/1/0611/5003/6139/files/Home2_1659f2cd-aa5a-4d18-9a93-b5955c1ec056.png?v=1648657681&quot;) background-size: cover; background-position: center; height: 900px;">