#CSS OVERLAY TEXT ON IMAGE HOW TO#
#CSS OVERLAY TEXT ON IMAGE CODE#

Step 3: Adding and Positioning our Overlay Text using CSS3 Transform The z-index is important to make sure it is lower than the z-index of the overlaying text so that the overlay doesn’t overlap the text.We typically normally set our background opacity at 25% (0.25) you can adjust the opacity level to suit your needs.Change the color of the overlay by adjusting the background element.In the second step we are going to use the CSS3 pseudo class ‘::before’ in order to create our color overlay to help separate the text from the image. Step 2: Creating the Image Overlay with a CSS3 Pseudo Class If you are creating dynamic content you may need to apply your background image directly to the HTML.Don’t forget to add the actual path to your background image.Adjust your width and height accordingly or change it to behave responsively.

#CSS OVERLAY TEXT ON IMAGE CODE#

For tutorial purposes we are going to use a set width and height but depending on your skill level you can adapt this code to be used responsively. In the first step we will set up the main DIV and apply a background image to it that will resize to fit using the CSS3 background property. Step 1: Setting up the Main DIV with a Background Image

#CSS OVERLAY TEXT ON IMAGE HOW TO#

In this tutorial we will teach you how to center position text over an image with a color overlay using pure CSS3. Remember depending on your skill level you can take the base code we provide then modify and adapt it according to your needs. For tutorial purposes we chose one of our more commonly used methods and made it as basic as possible so it was easy to follow. We do this quite often and have developed several different methods for achieving this type of layout. I wish I had known how to do this six months ago - it would have saved so much time, it would be even better if Canvas updated their content editor to allow people to pad images and overlay text so we wouldn't have to go to such lengths to achieve something so simple.A very common and stylistic trend in web design is to overlay text over top an image. I have also hidden the left navigation menu for students and collapsed it by default for staff using this line of Javascript:ĭocument. &emsp &emsp &emsp &emsp &emsp &emsp &emsp &emsp &emsp &emsp insert_title * Sample HTML Code to Insert Block/Slab and over-layed Text. * Custom Canvas CSS - Gower College Swansea - Tony Sales */ The menu blocks are dynamic not fixed which means they will wrap onto the next line if you are viewing them on a smaller display - so you may see 2, 3 or 4 blocks per line on your own monitor/screen. For external links you may want an alt-tag depending on the intelligibility of the URL it links to. For accessibility I would recommend removing the default alt-tags from images that link to internal pages/documents etc otherwise the screen reader will read out the link and the alt-tag, whereas it just needs to read out the link. This code allows for the creation of four different sized images: front page graphic with overlay, menu block with overlay, double menu block sized slab with overlay and a book thumbnail (from google books) with no overlay. In the editor each image will be on a separate line with the text beneath it. Here are some screenshots of how it will look:Īnd here is the code that makes it possible - all you have to do it create the padded images at the correct sizes, add the code to your css file, then use the html examples at the bottom to insert your images and overlay the text. I thought I would share the following CSS/JS files in case there is anyone else who wants to be able to do this.

Css overlay text on image