SquareOne background images not sizing properly on iPad and iPhone

I have an iPhone 5s and every image looks fine in landscape and portrait mode. I don’t have an iPad though. When you look at the squareone demo do any of the images show up distorted? Just trying to see if the issue occurs in the main demo or not.

Anyone out there with an iPad please take a look and help us out 🙂

I’m still not seeing any blurred or distorted images. I’ve looked at it with an iPad and it still looks perfectly fine. The images aren’t supposed to completely resize since they are background images. Another example of how it’s supposed to function – http://demo.studiopress.com/parallax/

Both links look fine to me as well (demo and phipoint link). I’m checking from an iPhone 5S in both modes, and I see no blurry images.

I also checked StudioPress’ Parallax theme and the images resize the exact same way.

@Gary, well I can’t speak for everyone, but I can say your site and the SquareOne demo is showing up as it should from my end. The background images are not supposed to completely resize 100% since some users may have images that are really wide, or really narrow……They made it to where the background images resize equally for everyone. I’m definitely not seeing any blurry or zoomed in images when viewing from multiple phones. I have an iPhone 5 and I’ve checked on another persons 5s as well as an Android and everything has looked fine.

@vincentpolisi What issue are you having exactly? I just visited your site and checked from my iPhone, but I’m not seeing any issues as the background image is showing up as it should.

As I mentioned in my last comment, the background images aren’t necessarily supposed to resize 100% (only the inline images are), they’re only supposed to shrink a little bit due to the size of the image. It’s usually a large width and shorter height. The reason for this is so the images don’t look distorted by being resized unequally.

Thanks for letting me know, I’ll take a look and come up with something to make it look better. It could take a while as there are many tests I will have to do get everything working, but I’ll get it looking as best as I can.

By default it’s supposed to look similar to other themes with background images….for example, take a look at SP’s theme with background images to see what I’m referring to – http://bit.ly/1xasTwe It pretty much works the same way. Although, I have seen something better that was done on another site, but it was a plugin that was doing it….which means javascript and other things were being used. Hopefully I can come up with a clean way to do it without too much code to keep everything simple.

I’ll update this thread once I come up with something.

Let me know once you’re able to check the demo on your end – http://demo.appfinite.net/squareone/

Also, let me know what device you’re using just so I can make sure.

Here is what I added in the 1140px responsive section of the css –

/* Desktops, laptops and iPads (landscape)
--------------------------------------------- */

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

	.head-bg,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-5,
	.home-feature-6,
	.home-feature-7,
	.footer-widgets {
		/*-moz-background-size: auto;*/
		/*-webkit-background-size: auto;*/
		background-attachment: scroll;
		/*background-position: center;*/
		/*background-size: auto;*/
	}

}

I removed the other parts of the code from the responsive section since the above code fixes the issue.

@Wes it appears to be working again.

The issue was only on tablets. Desktops, laptops, and mobile phones all looked fine, it was just certain tablets that needed adjusting. It looks a lot better now.

@Gary sure I can do that, but before I do let me take another look at it and make another adjustment so I can make sure I get everything right. Once I get that done I’ll send you the update…..actually, if I get everything working properly I may just go ahead and update the theme so that you can download it from your account – https://appfinite.com/my-account

I’ll keep you updated.

Yes he had it fixed a while ago, it was just the tablets that weren’t scaling the background images properly. The images were “zoomed in” and pixely for some users, but is all fixed now. Were just waiting on the final update. Although you won’t need to wait for the update, you can just add the code below to your responsive css –

/* Desktops, laptops and iPads (landscape)
--------------------------------------------- */

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

	.head-bg,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-5,
	.home-feature-6,
	.home-feature-7,
	.footer-widgets {
		/*-moz-background-size: auto;*/
		/*-webkit-background-size: auto;*/
		background-attachment: scroll;
		/*background-position: center;*/
		/*background-size: auto;*/
	}

}

That’s not technically parallax, but it’s similar in its ways. To remove it for this theme, just “comment out” or remove the background-attachment: fixed; part of your css (which should be around line 1819 by default under the “site header” section) and it will remove that effect entirely.