cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

How do I write text over a image?

Jump to solution

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.

4 Replies
Highlighted

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!   

 

Tags (1)
0 Kudos
Highlighted

jessicanashemail@gmail.com, 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.

Highlighted
Lamplighter

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

Highlighted
Learner II

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.

View solution in original post