Pinegrow Community Support Forum

Text overlay on image - how?


#1

Super noob here. I’m a graphic designer trying to teach myself web design, and Pinegrow seems like a good way to do it with minimal coding.

I’ve been following many of the tutorials, and want to create something similar to the Summer Nights example where there is text overlaid on the cover image. I’ve been following everything step-by-step, but for some reason my text is behind the image, and I can’t figure out why. See a screenshot here. I added opacity to the cover so you can see the text beneath it.

Any ideas how I can fix this?


#2

My guess is this has to do with something called the Z-index, like layers in photoshop, which stack stuff above/below one another. Using the tree view in the side bar, find the text element and move it higher up the tree, above the ‘layer’ it is currently under, and that should change the stacking order. Or, select the text element, and in the visual editor find the Z-index setting and change the number to something like 500 (the higher the number the higher the element is in the stacking order), which should bring it ‘forward’ to sit on top of the rest of the elements. Hope I explained that well and helps (I’m a newbie too).


#3

The Z-index worked! I’d tried using the tree to re-layer the elements but that didn’t work. Looks like Z-index was the magic trick. Thank you!


#4

Excellent…glad one of my guesses works. :slight_smile: