Totara Learn Open Discussions

Text over image HTML block

 
MathiesonAnissa
Text over image HTML block
MathiesonAnissa 发表于 2021年06月24日 Thursday 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


RossAnna
Re: Text over image HTML block
RossAnna 发表于 2021年06月24日 Thursday 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

MathiesonAnissa
Re: Text over image HTML block
MathiesonAnissa 发表于 2021年06月25日 Friday 00:29
 

Thank you Anna, this worked perfectly :)