Background image not same on mobile

Question

This is what the background image looks like on the laptop

This is what the background image looks like on mobile enter image description here

As you can see the background is not correctly aligned, I want to see the exact same background on both.

Below is the cs code that I used and it doesn't help in resizing the image so that I see the same background image:

body { background-image: url('https://www.hdwallpapersbook.com/wp-content/uploads/2017/05/Justice-League-Batman-Wonder-Woman-Aquaman.jpg');

background-attachment: fixed;
background-repeat: no-repeat;

background-position: center center; background-size: cover;

}

Answer 1

You could try something like:

To force the image to contain itself in the container (this will most likely look a bit odd)

• background-size: contain;

or mess around with background position properties - so the part of the image you're seeing shifts in the container

• background-position-x: right;
• background-position:center

or look into object fit css properties:

• object-fit: scale-down
• object-fit: fill

or crop the original image and create a new image for mobile only view.