asked on

Keeping

I have a webpage with a "slide show" of transitioning background images that sort of tell the story of the accompanying song: http://dijitalrealm.com/GrandDesign.html. I like the way it looks but when I'm in landscape view on my mobile phone and I have to scroll down the right hand div to see all the lyrics, the background image gradually gets covered with black from the bottom up as you scroll.

Is it possible to keep the background images showing full screen when I scroll? For comparison look at the same page with one stationary image: http://dijitalrealm.com/JCMusic/GrandDesignStill.html

I'm guessing that my code is pretty unprofessional but hopefully there's a solution that wouldn't require too much modification.

Thanks!
John

David S.

John, before fixing CSS issues, it's important to correct serious HTML issues, like the missing doctype.

https://validator.w3.org/

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

John Carney

ASKER

Thanks, Julian! Just got back from a long weekend, I hope to try this out later today sometime.

Thanks, John

John Carney

ASKER

Hi Julian, thank you so much for going to all this trouble! I checked https://validator.w3.org/ and there were only 2 output errors as opposed to my 25 or 30 :- ) It looks very slick and I kind of like the fact that some of the images repeat, but I can't figure out how to modify the code to have the single image fill the whole screen, so that I can have that as an option if I want. I also can't figure out how to modify the positioning. I'm viewing it on my android in firefox and the tug-of-war image for example is fixed at the top and in the horizontal view I can barely see the tops of the kids' heads.

Also - I hate to sound so picky after what a great job you've done - but on my phone the ease-in works great but there's no ease-out. How do I fix that?

Thanks,
John

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

John Carney

ASKER

Fantastic, Julian, thanks! There were only 2 small issues and one of them I was actually able to fix myself. The images were still not easing out so it occurred to me ... (I'm starting to get the logic of your code) ... to add this line to the background-image style: "transition: opacity 2s ease-out." And lo and behold it worked!

The one remaining problem is that when I'm holding my phone horizontally and I scroll the pane on the right to see the lyrics hidden below the screen, the nav buttons move up and out of view. This is not the end of the world, since if somebody wants to hear another song they can scroll back up, but it would be nice if the nav buttons would stay put, locked to the background images so to speak. Is there a way to do that?

Thanks,
John

John Carney

ASKER

Hi Julian, I thought I awarded the points for this last week, sorry for the delay. I actually even figured out how to fix the menu scrolling problem as well, so I now have something pretty awesome I think, thanks to you.

I'm sure I'll be asking more questions about this page just to learn more ways to tweak it, so please be on the lookout!

Thanks,
John

Julian Hansen

You are most welcome John.