Amazing Canvas background effects

Fun background effects

In this tutorial, we are exploring some fun code that will help us create interesting pages in Canvas. Don’t settle for the default white background. Follow along on the demo Canvas page:

https://canvas.instructure.com/courses/2560052/pages/page-background-effects

Try this code in your Canvas course

<div style="background: url('https://images.unsplash.com/photo-1541053892672-e3e9f3947e42?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80') no-repeat center; align-items: center; display: flex; justify-content: center; height: 400px; width: 800px;">
    <div style="background-color: rgba(255, 255, 255, 0.4); padding: 20px; margin: 30px;">
        <p>Create some amazing stuff for your Canvas pages</p>
    </div>
</div>
<hr />
<div style="background: url('/courses/2560052/files/190295517/preview') right bottom no-repeat , url('https://images.unsplash.com/photo-1531685250784-7569952593d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80'); height: 400px; width: 600px;">
    <p style="padding: 100px;">Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.</p>
</div>
<hr />
<div style="background-image: conic-gradient(#aa4b6b, #6b6b83, #3b8d99, #aa4b6b); height: 50vh;">
    <p style="padding: 100px; color: #ffffff;">Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.</p>
</div>
<hr />
<div style="background-image: linear-gradient(45deg, #aa4b6b, #6b6b83, #3b8d99); height: 400px; width: 100%;">
    <p style="padding: 100px; color: #ffffff;">Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.</p>
</div>

---

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