Front page background image

I don’t see anything from the Theme overriding the plugin. The text and the buttons seem to be showing up fine on my end. How are they supposed to look? ….Or did you get it working?

Oops, here’s the link –> http://www.vintagestpats.com/

Most browsers can only resize a background image so far. They do their best to scale them to best fit the browser without stretching or shrinking the image too much. The goal is to adjust the image without losing quality. This is how it works on any theme or any site that attempts to resize a background image for smaller mobile browsers.

Most sites (including large sites/companies) will include a 2nd image that is designed for mobile devices. So if you have a large/wide image for desktop/laptop, you could also have a slim, more vertical background image that appears for mobile devices.

This applies to background images. Inline images usually resize for mobile devices much easier….but it’s difficult to make an inline image show up as a background image with text, buttons, and widgets on top of it at the same time, which is why most will have the 2nd image appear if necessary.

Having a 2nd image is not always necessary though, it really just depends on the type of image you’re using and how much of it needs to be seen on a mobile device. On mobile browsers it’s expected to sacrifice some of the background due to the size of the browser.

Depending on how you want things to be displayed, you can try changing the background-size: auto; to background-size: contain; or cover to see if you get a better result for the image you’re using. You can find this code in the responsive section around line 2390 in your style.css file

	.front-page-1,
	.front-page-4,
	.front-page-6 {
		/*background-attachment: scroll;*/
		-webkit-background-size: auto;
		-moz-background-size:    auto;
		background-size:         auto;
	}

Just to confirm, I highly researched #1 above (Why is the image not showing up on my iPad?). It isn’t showing up on the demo either. I tried everything (baseline images, gifs, sizes, / after URL). I tried everything I could get my hands on and nothing.

I actually have a similar solution to fix that for iPad browsers that I tested with another theme. Right when I was going to apply the update to Ambition, my iPad stopped working (kids got a hold of it). So once I get that fixed then I can get back to testing and updating that issue.

Most of that white space you’re seeing (on smaller browsers/mobile devices) is because of the minimum height that you added –

.front-page-1 {
	position: relative;
	min-height: 900px!important;
}

….As well as the size of your image. Since you have your image set to show itself in full, it would be better to remove the min-height since the image can only stretch so far. If you have it set to show itself in full, then the browser will show the full image, but it won’t stretch too far (height-wise) since it has to show the full image within the small space.

Also, there is a lot of space on top of your image itself that I would remove. I would remove all the extra space from the image so it only shows the image from top to bottom, left to right. It should definitely show up better once you edit the image itself, and then apply the other changes.