How do I write text over a image?

[jessicanashemai]

I am creating a homepage template and have images that I would like to overlay with text so they are editable to the user. Is there a simple way to do this? Example, if I have a blue square image imported and would like to write text in the box.

[aaron_bahmer · Accepted solution]

This is not really a simple situation. Here's a link to the W3Schools page where the process is demonstrated. Tryit Editor v3.6 

Essentially, you have a <div> for text nested within a <div> for the image. The <div> with text is styled to use absolute locations for the text within a <div> styled to accept relative locations. This example also shows the image being styled to be partially transparent. Other CSS for images at CSS Styling Images.

You'll have to use the styles inline (<div style="">) and I'm not sure any of this styling will survive the TinyHTML editor once you save, though.

It might easier to use a <div> with a background-color styled in and then include the text. That will work with solid colors.

Another consideration is text contrast over the image/color - keep accessibility in mind.

[Diana12]

I am an elementary teacher that doesn't know anything about coding.  Is there by chance a non code solution.  🙂  I just want my kids to click on a link in my picture that takes them to another page.  The problem is they need to click on a specific area or I'd just link the entire picture.  I thought I could cheat the system and just add a table cell and put the link in it, but the entire picture went away.  It's just a picture about me for the first week back to school virtually.

Thanks!   

[Shar]

Hello Jessica Nash,

Based on what you want to accomplish, I think the simpler route would be to get custom classes added to your CSS with the blue box styling that you'd like.

If you're looking to do homepage with buttons, there are a few other threads here in the community like:

Home Sweet Homepages without Tables‌

https://community.canvaslms.com/groups/designers/blog/2015/04/16/creating-an-inviting-course-home-pa... 

Good luck,
Cheers - Shar

[aaron_bahmer]

 @jessicanashemai , I've used custom classes added to an instance of Canvas (part of the theme editor for your admin), and they work very well as ishar-uw has suggested. Practice with in-line styles until you know it will work like you wish. You may even be able to style the gradient into the blue backgrounds for your buttons. The layout of those buttons can also be controlled in the custom CSS.

[Chris_Hofer]

Just in case anyone is looking for the updated links from Shar's reply, you can find them here:

• Home Sweet Homepages without Tables
• Creating an inviting course home page

[ValentinaFahler]

Hi, I'm designing a homepage template and trying to add text over an image so that the text can be edited by the instructor. I haven't been able to figure out the HTML code that I need to use for that. Would anyone help me with the code? Thanks!

[DrNufer]

It can be done. A simple way could be to use a <span>.  Try tinkering with this code in a sandbox:

<div style="position: relative; width: 300px; height: 200px; background: url('https://images.unsplash.com/photo-1651346860609-205b30c4e10e') no-repeat center/cover;">

<span style="position: absolute; left: 10px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px;"> Your text here </span></div>

In this example:

• The outer div has a background image. It's set to cover the entire div and is positioned in the center.
• The span contains the text you want to overlay on the image. It's positioned absolutely within the div, so you can place it wherever you like by adjusting the top, right, bottom, and left properties.
• The text itself has a white color and is set against a semi-transparent black background (background-color: rgba(0, 0, 0, 0.5)) for better readability. Adjust the rgba values as needed. The 0.5 means the background is half transparent. 0 would mean completely transparent, 1 would be completely opaque.

You can further adjust the positions, dimensions, and styling as needed.

If you have access to your theme editor as an admin then you can set up some classes for this kind of thing.  You can see that as one of the things covered in this tutorial:

https://www.howtocanvas.com/theme-editor/text-overlay-parallax

[DrNufer]

p.s. if you want the text centered then it's challenging as Canvas scrubs the 'transform' and 'translate' tags, but you can maybe wiggle around using some padding to center it.  

<div style="position: relative; width: 300px; height: 200px; background: url('https://tcsedsystem.instructure.com/courses/99483/files/19919885/preview') no-repeat center/cover;">
<div style="position: absolute; top: 50%; left: 0; right: 0; height: 20px; margin-top: -10px; text-align: center; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px;">
Centered text</div>
</div>

Here's what's happening:

• top: 50%; positions the top edge of the div at the vertical center.
• left: 0; and right: 0; ensure the div spans the entire width.
• height: 20px; is an assumed height of the text content. This will need adjustment based on your actual content.
• margin-top: -10px; (which is half the height) nudges the content up so that it's vertically centered.
• text-align: center; centers the text horizontally.

The disadvantage to this is that the values will have to be manually adjusted for pictures of different dimensions.  If the height of the text is different than the 20px that I'm assuming then the 'height' and 'margin-top' values will need to be adjusted.  Not a great solution to your question, but technically what you ask is kind of possible.