Text over Image - Post ID 255808

User 1991012 Photo


Registered User
55 posts

Hi,
I need to have text displayed over image.
I recognized image should be defined as column/container background image with text or paragraph element in column/container. Everything went well till the moment I started responsifying. Backgroung correctly shrinked as if it was a standard image in the column/container but I don't know how to solve the problem with the column/container height which was initially defined to display the background image.
So, is there a way how I can get background image displayed without column/container to be defined or if that is needed, hoc can I column/container shrink according to the content.

Thanks in advance,
Zoran
User 103173 Photo


VP of Software Development
0 posts

What you want to do will have some tradeoffs. You can use background images in the column's, but these will not show in Outlook. Also, text overlapping an image on lower breakpoints will become pretty unreadable.

One possible way to do this is using a background image on the column and set the Min-height to the desired size and then add a Text element to the column and apply the necessary Margins to it. Then on lower breakpoints, you can swap out the background image for smaller versions of that image and re-adjust the min-height.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 1991012 Photo


Registered User
55 posts

Is there an alternative way to have Text over Image displayed?
One alternative way would be to put full width image in one column, text or paragraph element in another column under first one, and than define negative margin upwards? Is this solution better? Is it going to be displayed in most important email clients?

Is there any other alternative?
User 434929 Photo


Ambassador
938 posts

Some clients ignores the entire margin or padding declaration if there is a negative value .
And for your info RED wont allows you to add negative margin for this reason.
Guys at coffeecup are awesometacular.
User 1991012 Photo


Registered User
55 posts

Mansour,
Thanks for your post.
I'm aware that some clients will ignore such declaration. That is why I'm asking & searching for 3rd solution.
By the way, RED will allow you to move lower column upwards over the previous column.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.