Totara Learn Open Discussions

Text over image HTML block

 
Anissa Mathieson
Text over image HTML block
di Anissa Mathieson - Thursday, 24 June 2021, 16:12
 

Hi

Wondering if anyone can share code and instructions to place text over an image in a HTML block

Or is it possible somehow with the editor?

Many thanks


Anna Ross
Re: Text over image HTML block
di Anna Ross - Thursday, 24 June 2021, 21:17
 
Hi Anissa

I've pasted some code below that puts text over a background image and looks like this:
text over a background image

<div style="
background: url(https://cdn.pixabay.com/photo/2018/08/05/17/37/nature-3586021_960_720.jpg)  no-repeat center center fixed;
-webkit-background-size: cover;   
-moz-background-size: cover;   
-o-background-size: cover;
background-size: cover;
padding: 40px 10px 40px 10px;
text-align: left;">
    <div style="
    max-width: 90%;
    margin: 0 auto;
    text-align: left;
    background: white;
    padding: 10px  10px 10px 10px;">
        <h2 style="color: black;">
            Heading
        </h2>
        
        <p style="color: black;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>


To use it, change the URL (bold and italic) to the link to the picture you want to use.
You might also want to change the values for the styles (in bold) to get it looking the way you want to look (e.g. if you don't want a white box around the text you can change the value 'background: white;' to 'background: transparent;', or enter a colour code like 'background: #c300c3;')


I hope this helps.

Anna

Anissa Mathieson
Re: Text over image HTML block
di Anissa Mathieson - Friday, 25 June 2021, 00:29
 

Thank you Anna, this worked perfectly :)