[davidd]

Neat resource. Thanks again for the attention!

[davidd]

That's right, Gandt. I used the hack above to align the images properly and the background-attachment: scroll to avoid the CPU overload.

[davidd]

Hi Gandt,

Thanks for checking out my site. The issue isn't with the parallax effect, which apparently is a CPU hog on small devices, it's with background-size:contain, which apparently doesn't work so well in iOS. I fixed it by using background-size: 200% contain; It made the image the right size and the vertical dimension fit to contain the text. Don't ask me why that worked, but it did!

David

[davidd]

Thanks Gandt. There's more information on the separate thread:

Parallax Home Image not working on phones

[davidd]

Heres' the site http://emily.viewfarm.com/

I also did this totally goofy thing that seems to have worked.

@media only screen and (max-width: 1140px) {
	.home-section-1,
	.home-section-3,
	.home-section-5 {
		background-attachment: scroll;
		background-position: top;
		-webkit-background-size: auto contain;
		-moz-background-size:    auto contain;
		background-size:         auto contain;
  	}
}

[davidd]

Holy Toledo, I played and played and this is what I did that worked for my case. I'm sure this shows the clown shoes, but it seems to be working okay.

@media only screen and (max-width: 768px) {
	.home-section-1,
	.home-section-3,
	.home-section-5 {
		background-attachment: scroll;
		background-position: top;
		-webkit-background-size: 200% contain;
		-moz-background-size: 200% contain;
		background-size: 200% contain;
  	}
}

[davidd]

Here are some hints about the issue. https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/

[davidd]

I did find this explanation for iOS issues that might explain the problem. I don't quite understand the solution.
https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/

[davidd]

Thanks for keeping this issue at the top of the list. This seems to be a common one. I've seen it in at least 15 other posts with no solution. braderz31's idea is as close as I can get, but it doesn't work on phones. Any heroes out there?

Even a snippet for replacing the images on smaller screens would be nice, but it would be better if some good 'ol (new) css would do the trick.

[davidd]

I have the same problem I'm trying to resolve, here http://www.studiopress.community/topic/parallax-home-image-not-working-on-phones/

[davidd]

Hey!!! I found a solution at this link:
http://thepixelista.com/responsive-genesis-child-theme-logo/

I disabled the header support which immediately made my css show up perfectly. Thanks!

David

[davidd]

Thank you Jami. Jessica Barnard's solution totally worked for my needs.
-David

[davidd]

Thanks Davinder,

I tried your idea to add !important in the css, but the injected code from the header customization WordPress or Genesis provides has !important too. I tried using the Genesis header scripts in the Theme Settings which says "The wp_head() hook executes immediately before the closing </head> tag in the document source," but that's not true. The injected code from WordPress gets inserted after the hook and before the </head> tag so the !important gets overridden.

I'll share it now so you can see. I have to cover it up soon because my clients don't want it out there yet.

http://www.zebramedtech.com/

The code I've injected using the wp_head() hook is this:
<style type="text/css">
.site-title a { background: url(http://www.zebramedtech.com/wp-content/uploads/logo-360-tall.jpg) no-repeat !important; }
</style>

It's being overridden by what I assume is injected by the header customization.
.site-title a { background: url(http://www.zebramedtech.com/wp-content/uploads/logo-brooklyn.jpg) no-repeat !important; }

Thanks again,
David

[davidd]

Thank you!!!

[Author]

Posts