# Text overlay on image - how?

**URL:** <https://forum.pinegrow.com/t/text-overlay-on-image-how/2536>\
**Category:** Beginners\
**Created:** [December 28, 2018, 3:35am UTC](https://forum.pinegrow.com/t/text-overlay-on-image-how/2536 "2018-12-28T03:35:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![neonmagnolia](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/neonmagnolia/32/1691_2.png) [@neonmagnolia](https://forum.pinegrow.com/u/neonmagnolia)\
**Post date:** [December 28, 2018, 3:35am UTC](https://forum.pinegrow.com/t/text-overlay-on-image-how/2536/1 "2018-12-28T03:35:26Z")

</div>

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](https://www.youtube.com/watch?v=jGQfoj5HFU0) 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](https://imgur.com/a/dOUhIvb). I added opacity to the cover so you can see the text beneath it.

Any ideas how I can fix this?

---

<div class="post-metadata">

**Author:** ![DanielF](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@DanielF](https://forum.pinegrow.com/u/DanielF)\
**Post date:** [December 29, 2018, 2:08am UTC](https://forum.pinegrow.com/t/text-overlay-on-image-how/2536/2 "2018-12-29T02:08:18Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![neonmagnolia](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/neonmagnolia/32/1691_2.png) [@neonmagnolia](https://forum.pinegrow.com/u/neonmagnolia)\
**Post date:** [December 29, 2018, 3:14am UTC](https://forum.pinegrow.com/t/text-overlay-on-image-how/2536/3 "2018-12-29T03:14:57Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![DanielF](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@DanielF](https://forum.pinegrow.com/u/DanielF)\
**Post date:** [December 29, 2018, 4:08am UTC](https://forum.pinegrow.com/t/text-overlay-on-image-how/2536/4 "2018-12-29T04:08:15Z")

</div>

Excellent…glad one of my guesses works. 🙂
