How might I add text on an image? Options

[masonh928]

So I'm designing a bakery template and I'd like to have the main "Call to Action" buttons be animated cupcakes that have text.


(())
((())))
(((())))))
(((((()))))))
(((((((())))))))
(((((((()))))))))))
^^^^^^^^^
^ Text Here ^
^ _______^
^ ______^
^_____^
^___^

That's my cupcake button with text lol

What's a simple yet effective way of doing this, I'm trying to make it flexible, so I'm trying to avoid 'position'.

This post has been edited by masonh928: Jun 13 2016, 10:16 PM

[CharlesEF]

See 'Using CSS to overlay text on an image' here. But, you will need to use position. The page also shows other ways. Or, see here.

[masonh928]

If I do use position, will that disrupt the layout for mobile devices ?

[masonh928]

This helped me and thanks charles:

http://stackoverflow.com/questions/8708945...an-image-in-css

But will it disrupt the layout on smaller screens ?

[CharlesEF]

To be honest, I don't know. I don't use any mobile device at all. I guess you could put together a small test page to find out for sure.

[masonh928]

Since my screen is so big, I just make the window smaller to simulate a mobile device.

[CharlesEF]

Well, I do that also for testing. But I've never made a page with an image and text over it.

[masonh928]

Yeah, thanks again... Helpful as always.

I don't believe it would since it's within a separate container within the image.

[Frederiek]

I never surf or test on a mobile phone device, but there are online simulators. Search for "online mobile test of website" or "mobile emulator testing" or similar.