Mobile Background Image Not Showing

This has been driving me crazy. I need to display a differen section background image for mobile and tablet.

I added this code

#collection-6669d27f9521df77f098ca38 section:nth-child(1),
	#collection-66715f670ee4966ea7aa4bb7 section:nth-child(1)
	{
		background-image: url('https://static1.squarespace.com/static/5fec63b71c227637fcd74134/t/66713b9f19e9862447fd3ed8/1718696863947/bground-landing-mobile8.jpg') !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		min-height: unset !important;
		height: 100vh;
		 object-position: -680px -200px !important;
	}

But when I view the page it still seems to be using desktop settings.

The page example is here - https://www.cn8.co.uk/landing-2

I uploaded a different Swan image that is 640px wide.

Hopefully someone can help me!

Many thanks

Sorry the code is

#collection-66715f670ee4966ea7aa4bb7 .section-background, .section-background .section-background-content {
		background-image: url('https://static1.squarespace.com/static/5fec63b71c227637fcd74134/t/667033d5ada3fd747c36b1cb/1718629334120/bground-mobile-new.jpg') !important;
		right: 0 !important;
		bottom: 120 !important;
		left: 0 !important;
		min-height: unset !important;
		height: 100vh;
	position: absolute;
	

It seems to fill the full width, and I need to show more of the swan.

Thanks so much!

what would I nee to change in order for the image to be closer to the content below but still aligning bottom of the sreen?

Hope that makes sense.

Any much appreciated for your help.

Also what should the ideal width of the mobile image be?

7 minutes ago, DavvaMC said:

Thanks so much!

what would I nee to change in order for the image to be closer to the content below but still aligning bottom of the sreen?

Hope that makes sense.

Any much appreciated for your help.

If you try the code I suggested, it might fix alignment issue. 

Thanks, I will give it a go and get back to you if you don't mind, this has been driving me crazy for ages now trying to get it right 🙂

6 minutes ago, DavvaMC said:

Also what should the ideal width of the mobile image be?

For standard iPhone models, the ideal width is 375 pixels, and for iPhone Plus models, it's 414 pixels. For iPads and iPad Minis, a width of 768 pixels works well, while larger iPad Pro models benefit from a width of 1024 pixels. Consider using a large width image and placing the Swan image centered at the bottom.

So create a 2560px wide image as recommended by SP, but have the swan centrally aligned.

Do I need to consdider height dimensions when I create the image?

4 minutes ago, DavvaMC said:

So create a 2560px wide image as recommended by SP, but have the swan centrally aligned.

Do I need to consdider height dimensions when I create the image?

No, you don't necessarily need to consider the height dimension. However, with a width of 2560px and a height of 1440px, the height is proportionally related to the width.

Thaks, it startig to look better now, however when viewed on 810px and 1024px there is a big gap between the text and the swan image can this be reduced, or do I have to create other images for different sizes?

Thanks again.

https://www.cn8.co.uk/landing-2

url doesn't work. Can you check it again?