Text over(/on top) of image

Design help General
1

i’m sure this is pretty simple, but i wasn’t able to find a good source for how to put text over an image. I changed the texts z index, but it’s still just sitting above an image element. Is there something else I need to do to make this work?

Thanks

2

The easiest way is to add the image as a background to a div then place the text(with its own div) in the background div.

3

Great, works thanks! How would i go about centering that text vertically within its parent div? Right now its aligned to the top!

4

Great question! Add % padding (top and bottom) to the div that holds the text, not the image div. If you want the text to be exactly center then the exact % will depend on how much text you have. This technique will make sure the text stays centered even if the image is responsive.

5

Thanks! However, the issue with the first solution in regards to the setting the div image bg is that if i want to do this for many components, for example in a table, changing one of those div’s bg changes all of them (since they are part of the same style). Does that mean i need to create a different style for each of those divs?

6

Any common attributes can be set in one class, then you can use nested class to add background images. This way when you change to setting of the top level class it will change for all elements with that class, without effecting what ever is set in the sub class.

1 Like
7

@Davidn is absolutely correct. @royherma, in general, you have to give each element in your design a different class if you want to affect styles differently for each element.

I hope that helps, Cheers, Dave

8

Hi @royherma, another way you can achieve what you’re describing is to use absolute positioning.

This demo may be helpful:
Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Overlaying Elements

Also, to center elements vertically, take a peek at this demo:
Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Centering (x and y)

Hope this helps!

9

Sorry to bump this old thread but it Is there a way to do this with images in a dynamic list rather than using a background image in a div? Thanks a lot :slight_smile: