Is it possible to have a TextLabel, where the background is below an image, but the text is above the image, so the ImageLabel is in between the two? I’ve messed around with ZIndex and LayoutOrder but the Image is always above both of them.
I want to achieve this, but the text is over the image.
2 Likes
Set BackgroundTransparency of the Text to 1
This just takes away the background of the text label, doesn’t work.
Then what’s the issue here? Is that your picture or what you are trying to achieve?
That is taken from Pokemon Sword and Shield, and I wanna achieve this (but the text is above the image)
So you want to do this:
Text
Image
Background
but it keeps doing
Image
Text
Background
- What exactly does it matter?
- Screenshots of the problem (might answer Q1)
Use zindex values, basically what zindex is that if a UI has a low zindex it is automatically put behind a UI with a higher zindex, you can read more about them here:
I’ve messed around with ZIndex and LayoutOrder but the Image is always above both of them.
I’ve already messed around with them, with the Image having higher ZIndex but it doesn’t work.
Have you tried giving the image a lower zindex than the other UI’s if it has a lower zindex then it will appear behind UI’s with higher zindexes
Change ZIndexBehavior to Global. It is Sibling by default, so child elements will not be able to render over each other. Sibling ZIndexBehavior only makes the ZIndex property change the layering order for elements that are on the same level of the parent-child hierarchy. Global ZIndexBehavior will make it so that ZIndex is relevant relative to all of the elements in the ScreenGui.
1 Like
But that just makes the TextLabel in front of the Image. I would like it to be like a sandwich.
Text
Image
TextLabel Background (it has a UIGradient)
Here’s what you need to do:
Duplicate the TextLabel, make one of the textlabels have a transparent background (We’ll call this Label 1), and make the other one have no text (This will be label 2). Then, get an image, set the ZIndex of Label 1 to 3, set the ZIndex of the image to 2, and set the ZIndex of Label 2 to 1.
1 Like
Smart! Why didn’t I think of this!
Thanks, this is my first solved post that wasn’t my own 
Yes, ZIndexBehavior only changes the way ZIndexes behave. The rest would’ve come down to you having to modify the ZIndexes and elements of the Gui. Sibling ZIndexBehavior wouldn’t allow you to do this. I thought the implication was there but I missed that your TextLabels supposedly “layered on top of the image” when the actual trouble was just not changing the background transparency.
this worked, thank you so much