Contact Form 7 notifications are "moving" backgrounds

[TrendRaider]

Hi,

is there any way to prevent section-backgrounds from moving when Contact Form 7 creates notifications (like “message send” or “mandatory field missing”)?

Please see here on our staging environment, when clicking on the button reading “Anfrage senden” the background moves. (It’s even worse when using parallax backgrounds because they start to zoom!)
Giving the column a lot of space on the bottom (e.g. 200px), so the notification-text should fit in fine, it still does this strange moving, so this isn’t the solution I thought it may would be.

It would be awesome if you could point me in the right direction for this problem!

Thanks a lot and keep on the good work with your theme

[ruenel]

Hello Alexander,

Thanks for writing in!

The background of the section moves because the height of your section has increased once the contact form message displays. To prevent the background image from moving, please set the background image position to top center.

We would love to know if this has worked for you. Thank you.

[TrendRaider]

Thanks a lot, this is working for background WITHOUT parallax.
I’ve now enabled parallax and it is zooming when using CF7. Any solution for this, too? Otherwise I will have to live without parallax.

[friech]

Hi Alexander,

Unfortunately, that is not going to work because parallax settings offset the background-position-y (top or bottom).

You might want to turn off the parallax, and use the native CSS background-attachment: fixed; instead. To do this, you can add this to the Section’s Element CSS area

$el .x-bg .x-bg-layer-lower-image {
	background-attachment: fixed;
}

More details about CSS Property background-attachment here.

Hope it helps,
Cheers!

[TrendRaider]

Thanks a lot, that did it. You are are hero!!!

[lely]

You’re always welcome Alexander!

Cheers.