Parallax background image cropping

[Star]

I've been having an issue with the background image for Parallax using the recommended size of 1600px width. It keeps cropping the right side of the image off.

I changed the following css and now the image shows completely BUT there's a lot of padding under it on mobile device screens. Can someone please let me know how to get this image to show without being cropped and having excess padding. Thanks.

.home-section-1,
.home-section-3,
.home-section-5 {
	background-attachment: fixed;
	background-color: #fff;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	-webkit-background-size: cover,
	-moz-background-size:    cover;
	background-size:         cover;

.home-section-1,
.home-section-3,
.home-section-5 {
	background-attachment: fixed;
	background-color: #fff;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	-webkit-background-size: 100%,100% !important;
	-moz-background-size:    cover;
	background-size:         100%,100% !important;

http://www.starsandchalk.com

[Christoph]

Hi,

there is a typo in the first part of css you posted.

-webkit-background-size: cover,

should be

-webkit-background-size: cover;

it´s pretty hard to tell visually, if there is any white padding, since home-section-2 is not present, home-section-3 is all white without picture and white writing...

The inspector says there is no padding...

On my screen your css change has no effect, the image does not crop without it.
As an aside you didn't include older versions of Firefox in your change.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Star]

I've changed the font color so now you can see. H1 seems to loose it's placement on different screens moving below widget 1. This is what I need a fix for. Thanks.

[Star]

I found a workaround myself.

[Author]

Posts