Text overlay

A lot of good UI designers are creating web content that includes putting text over images using CSS. This is different than uploading an image that has text on it because ideally you’ll want the image to adjust to the screen size, but you want the font size to be consistent regardless the screen size. So if the image changes from 600 pixels wide on a large screen to 250px on a small screen, you wouldn’t want the text to also decrease in size or it would be too small to read on the small screen. You want to make sure the text is always legible. That’s a pragmatic reason for applying the text overlay effect, and the less pragmatic reason would be because text overlay is just a really cool effect, and not something we ever see in Canvas.

1) A mobile view with an image width fixed at min-width: 350px. 2) A larger resolution on a monitor with a width of 50% - the text maintains h2 size and adjusts to fit the larger image.

Getting started with CSS

For text overlay to work, you will need to add a few lines of CSS code to your institution’s theme editor. You will either need to have access to the theme editor or work with someone at your institution with access. Here is the code that you will need to add to your CSS file:

.overlay-content {
  text-align: center;
  position: relative;
}

.overlay-lighten {
  opacity: 0.3;
  }
  
.overlay-darken {
filter: brightness(50%);
  }

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

You are welcome to name the classes (overlay-content, overlay-text, etc.) whatever you like. You can adjust the opacity and brightness and include more classes if you want, such as opacity: 0.6; or filter: brightness(33%);. here is what each of those lines do:

.overlay-content

This code goes inside that <div> that will house both the image and the text. It aligns the content centered (both the image and the text), and ensures that the elements scroll with the page instead of being locked into place (position: fixed;).

.overlay-lighten

This makes the image slightly transparent. An opacity of 1.0 would be no change from the original image, and an opacity of 0.0 would be completely transparent. I lighten the image so that dark font can have good contrast. If the image is already light and doesn’t have a lot of contrast, you may not need this class.

.overlay-darken

This makes the image darker by reducing the brightness by 50%. This is a good approach if you want to put light font in front and is a very common technique in web design and advertising to help the text pop on the screen.

.overlay-text

This is also a vital line of code because it ensures that the text is centered left-right and top-bottom, which is actually a little more complicated than one would suspect. Essentially, we are putting the text 50% down from the top of the .overlay-content <div> and 50% from the left. The problem is that this places the top left corner of the “textbox” right in the center, but we want the center of the textbox to be centered.

.overlay-text { position: absolute; top: 50%; left: 50%; }

For this reason, we add one more attribute: transform: translate(-50%, -50%);. This essentially says to start the textbox in the center and then back up a bit (50%). This places the center of the textbox in the center of the <div>. We wouldn’t want top: 50%; left: 50%; because that would simply put the corner of the textbox in the top left corner of the <div>. We want the center of the textbox to be in the center regardless if there are many words of few words.

Now let’s explore the html components. This is the code that will be on your actual Canvas page (announcement, assignment, page, etc.). Here is an example of code that I used in my tutorial video:

<div class="overlay-content">
    <img class="overlay-lighten" style="width: 50%; min-width: 350px;" src="https://images.unsplash.com/photo-1501822810445-bba370e517ab?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" />
    <div class="overlay-text" style="width: 50%; min-width: 350px;">
        <h2 style="padding: 0 20px;">Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings.</h2>
    </div>
</div>

Both the image and the text are housed within <div class="overlay-content"> </div>.

Next, I have an image. I chose the “overlay-brighten” class, meaning the image will be 70% transparent. I set the image to 50% the screen width, with means the image will be larger on bigger monitors. It will take up 550 pixels on a screen that is 1,100 pixels wide. I also set a minimum width of 350 pixels. On small screens, I want to ensure that the image is large enough. If the screen with is 500 pixels wide, then my image will be 350 pixels instead of 250 pixels (50% width of 500 pixels). For the source, I just picked a random image from https://unsplash.com/. You can embed an image or you can upload one (or use an image already uploaded to your course).

For the text, I put the overlay-text class within a <div> and set that <div> to the same measurements as the image (width: 50%; min-width: 350px;). You can put the class and style in the <h2> or <p> tags as well if you’d like. For the example above, I used a heading 2 <h2> and put padding at: 0 20px;. This means I don’t want padding on the top and the bottom, but I did want some padding on the left and the right. I don’t want the words to go right up against the edge of the image - I want just a little padding from the edge of the image. If you would like to learn more about padding (and margins), refer to out blog post that discusses it in detail.

Close out the divs </div> and you are good to go.

If you are using an <h2> over an image that is 50% wide with a min-width of 350 pixels, then my rule of thumb is that you should limit the text to about 9-10 words and 100 characters (with spaces). This should look okay on a mobile screen.

If you are using a <p> over an image that is 50% wide with a min-width of 350 pixels, then my rule of thumb is that you should limit the text to about 400 words and 330 characters (with spaces). If you want a combination of a heading with paragraph text, then you’re just going to have to do some trial and error to see what looks good on mobile. The amount of words will depend on the length of words you choose and how they wrap the lines. Text overlay is probably not ideal if you want to convey a lot of information, but it can be a really interesting effect if you want to create a break in content, highlight a quote, or just create an interest effect on your Canvas page.

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas