Charlie,

I wasn’t aware you weren’t using Enfold. However any compatible slider will do the trick. The catch is do you need it to be full page rather than full frame, AKA in the Box. Once you resolve the full frame issue the full frame slider will do what you want. If you set the background to static (not sure if this is even an option with Kriesl themes, but it can be done in CSS somehow), then use the PNG images it will work.

Basically your background fills the browser and the slider works over top of that. If your browser is say, 1500×430 do this:

1. Make your images 1500×430 in Photoshop
2. Keep the background transparent
3. Add a guideline to where you want the text to appear (height)
4. Set a second guide at Vertical 50%
5. Set your text tool to Center Justify
8. Add text to the cross section of the guides
9. File – Save for Web – Save as PNG 24 named Slide01.png

For your second slide:
10. Hide your first text layer
11. Add a new layer
12. Repeat steps 8 & 9 changing the file name to Slide02.png

Repeat for as many slides as needed.

Add the slides to your slider in numeric oder.
Set your transition to Slide Right to Left
Test.

It should work perfectly.

Sorry it took me a day to reply. I didn’t see the notice until just now.

I’m just another coder like you but the way this is done is that the image is a PNG image with just the Whole Foods text and the shadowing. the sliders are transparent images with just the text and they slide over the background. An easy way to achieve this is set your background image, Then place your text image under the slider (or the slider on top of the text image), add text slides to the slider. Done.

“mailto: (Email address hidden if logged out) ” would be a link to email

super, You can test your site here: http://responsivedesignchecker.com I can say though that there is a great possibility that parallax effects won’t work on mobile browsers. Especially iOS Safari if the motion is set to reduce motion to reduce battery use.