Background image looks pixelated in mobile

[kgeee]

Hi

I’ve noticed a strange thing when adding a background picture to a row.

The picture looks fine when scaling the image on a desktop. See dekstop.png

But when I am viewing the page on Chrome or Safari on IOS, the image looks pixelated and is cropped very randomly.
I’ve attached ios-pixel.png where it is easy to tell.
I’ve also attached oil-gas.png which is the picture current in use.

Why are the pictures looking pixelated and weird on mobile browser?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please add this to Theme Options => Custom CSS:

@media only screen and (max-width: 767px) {
.fw-row>.spb-row,
.spb-row[data-image-movement="fixed"] {
	background-attachment: local !important;
}
}

[kgeee]

HI

The CSS seems to generate some problems. See attached. Also it still does not work on mobile.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

You have copied it in wrong, please compare the screenshot to the code provided.

It may show one error only from the use of !important but that can be ignored.

[kgeee]

Thank you. It’s working now.

Will you include the fix in an upcoming update of the theme?

[David Martin – Support]

Glad to help you out.

Yes, I’ll assign this to Ed so he is aware of this issue.

[Swift Ideas – Ed]

Added for the next update, thanks!

– Ed

[kgeee]

Thank you. Appreciated.

[David Martin – Support]

Thanks Ed!