Support ForumBackground images problem on iphone and ipad – Support Forum

Background images problem on iphone and ipad

reinki0013 — Thu, 12 Jun 2014 05:26:23 +0000

Hey Guys!

i have on my home-site some background-images.
on my samsung galaxy-s3 the images are correct shown – they are smaller.

but when i see the page with iphone/ipad – the image is not smaller – its juts a little piece of the big image.

what can i do to make this correct?

kind regards,
reinki

Reply To: Background images problem on iphone and ipad

IshYoBoy — Thu, 12 Jun 2014 06:02:21 +0000

Hey,

Could you please provide a link to the page where this can be seen?
Could you also please provide info about what device you are using? 3S, 4S, 5S? iPad 1,2?

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Background images problem on iphone and ipad

reinki0013 — Thu, 12 Jun 2014 06:07:42 +0000

the link from my page is:

https://stein.reinki.at

Iphone 4S und Ipad2

Cheers

Reply To: Background images problem on iphone and ipad

IshYoBoy — Thu, 12 Jun 2014 06:25:17 +0000

Hi,

Thank you ver much, we’re already looking into it.
Any chance to also provide a screenshot of the problematic part? Thanks

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Background images problem on iphone and ipad

reinki0013 — Thu, 12 Jun 2014 06:25:21 +0000

I also tried it now with a Iphone 4 -> here i also see just a little thing of my large image.

so what can i do to fix this problem?!

cheers!

Reply To: Background images problem on iphone and ipad

IshYoBoy — Mon, 16 Jun 2014 13:48:56 +0000

Hi Reinki,

Sorry you had to wait so long but fighting with parallax and the current HTML structure is a tough fight especially when Apple does not handle “background-position: fixed” as it is supposed to.

Here is a partial solution that makes the images look nice on Apple devices but stops the parallax functionality.

// iPad background-position fix
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

	.wpb_row {
		&.ish-parallax-static {
			background-attachment: scroll;
		}

		&.wpb_row.ish-parallax-dynamic {
			background-attachment: scroll;
			background-position: 50% 0 !important;
		}

	}
}

// iPhone background-position fix
@media only screen and (max-device-width: 480px) {
	.wpb_row {
		&.ish-parallax-static {
			background-attachment: scroll;
		}

		&.wpb_row.ish-parallax-dynamic {
			background-attachment: scroll;
			background-position: 50% 0 !important;
		}

	}
}

// iPad background-position fix

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

.wpb_row {

&.ish-parallax-static {

background-attachment: scroll;

}

&.wpb_row.ish-parallax-dynamic {

background-attachment: scroll;

background-position: 50% 0 !important;

}

// iPhone background-position fix

@media only screen and (max-device-width: 480px) {

.wpb_row {

&.ish-parallax-static {

background-attachment: scroll;

}

&.wpb_row.ish-parallax-dynamic {

background-attachment: scroll;

background-position: 50% 0 !important;

}

You can add this code via the “Custom CSS” field inside Theme Options or by using a child theme.

This will be a part of the next release so once the new version’s out you can remove it completely.

We will try to rework the HTML structure and find a better way to handle Parallax on Apple devices as well but since there are so many row options it will take more time to test every single scenario on all available browsers and ensure that everything else works 100% well.

Hope this solution works well for you.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market