I have tried many variations between the background image and jumbotron to get everything working properly including some css changes. I cannot get the right combination so now I come to you for help!
My goal is to have the background image with the parallax scrolling effect while displaying properly between desktop, tablet, and mobile.
If I use a jumbotron image, and deselect the parallax scrolling effect than my mobile device shows the image a bit off center from where I want it but at least it’s the most correct positioning I can get it. But, it’s a fixed image and doesn’t have the parallax effect.
If i select the parallax effect on the jumbotron, the effect doesn’t actually work, and the image is zoomed in on the mobile device.
If i do not use a jumbotron image, and use a background image instead (Fill Screen/Center position)…I get the parallax effect on the desktop but not on mobile. But the preview in the Customize section shows the image I desire properly positioned on the mobile screen. If this was true on the mobile device I would have a winning combination. But sadly, I don’t.
It may be worth mentioning that on the counter section my background image parallax effect is working perfectly.
Please guys, help me out!! Thank you so very much. Cheers
http://indoeye.com
Here is how it looks when the background image is used on fill screen/center position… parallax works on desktop. The preview shows it to be centered on mobile where I want it, but my screenshot shows you its zoomed in
I am having the same issue. No image appearing on the mobile, but paralax working on the desktop. www.chrisconnellyphotography.com
it seems that any combination turning on paralax effect, turns the image off in mobile
After a little searching - I added this code:
@media only screen and (max-width: 1024px) {
#header {
background-attachment: initial !important;
}
}
and now the image now shows up on the mobile, but no paralax effect.
Yup Chris, Messing around with the Media CSS has solved everything for me as far as the photo displaying properly. But there is no parallax effect on mobile for neither the header image or the shutter background image. But i’m glad to have the homepage jumbotron parallax working while the mobile header displays properly. I actually tweaked almost every section of my homepage for mobile display with the Media CSS and I’m super happy with how everything looks now. The original menu was horrible so that was the first to go. The padding on each of the sections (projects, services, etc.) all needed to be reworked. But after some tedious time, the end product is well worth it.
Cheers
Hi @indoeye,
Did you finish at the end?
Thanks,
Cristian
@photoconelly, thanks so much for the css-code! 
I had the same issue and at least the jumbotron-image is now shown properly (don`t care so much about the paralx effect).