Background effects: fade and overlays

  • 3
  • Article
  • Updated 2 years ago
  • (Edited)
rvoverlaypng

In this article I will be providing some customizable code you can implement into your presentations for background images. I will be going over fade, gradients, and pattern overlays.

Fade

Fading your background image is great for readability. It will help your content elements such as widgets appear more clearly on your display.

First, let’s open our presentation editor and create a new placeholder. In your placeholder playlist, click ‘Add’ and then ‘Content’ from the dropdown. You will then be brought to our store, where you can search for our HTML widget. We will be using this widget to paste in our code.

Screen Shot 2015-10-14 at 111628 AMpng

After hitting ‘Add’ you will be brought back to your placeholder playlist. Click ‘Configure’ under your HTML widget settings. There you will see a text box where you can insert your code.

Select all and paste the following code to create a faded background:

<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>

<style>
body {
background: linear-gradient(to bottom right,rgba(000, 000, 000, 0.9), rgba(000, 000, 000, 0.6)), url("YOUR IMAGE URL GOES HERE") no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width:100%;
height:100%;
overflow: hidden;
position: absolute;
display:flex;
}
</style>
</head>
<body>
</body>
</html>

Remember to stretch your placeholder to fit the entire screen, so it acts as a background image. If you’d like to just create a gradient image, then feel free to scale the dimensions down to however big or small you’d like.

You will see that within the background url bracket I highlighted “YOUR IMAGE URL GOES HERE”. This is where you will paste the direct link to the background image you would like to fade. To get access to your direct link, simply upload your background onto storage and select the chain icon. Copy the URL and paste it into the brackets.

Remember: you can adjust the opacity of the fade by editing the rgba code.

0.9 = 90% opacity.

0.6 = 60%.

Play around with it till you find your happy place!

(000, 000, 000) is the value for the color black. So you can go ahead and create a fade in any color you’d like!

For example, a red fade set at 30% opacity would look like this: rgba(255, 0, 0, 0.3).

Gradients

Now that we’ve established how to insert custom code, let’s move on to gradients. Gradients are useful for creating more dynamic and gorgeous images.

Screen Shot 2015-10-14 at 113008 AMpng

Here is the code you would insert:

<style>
body {
background: linear-gradient(to bottom right,rgba(255, 0, 0, 0.7), rgba(176,196,222, 0.6)), url("YOUR BACKGROUND URL HERE") no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width:100%;
height:100%;
overflow: hidden;
position: absolute;
display:flex;
}
</style>


You can also customize the direction of your gradient. Note ‘to bottom right,’ within the brackets. You could use ‘to top bottom,’ and so on!

Patterns

Finally, let’s insert a pattern to overlap our background! Remember, the pattern you use must be transparent. http://www.transparenttextures.com/ is a great resource.

Screen Shot 2015-10-14 at 115812 AMpng

Please note that this will only work if you have an existing background image in your presentation outside of the HTML editor.

To do this, first configure your background by clicking the presentation settings cog icon. Beside ‘Background:’ click ‘Edit’ and input your URL or upload via storage.

Screen Shot 2015-10-14 at 120331 PMpng

Next, add your HTML widget as outlined earlier in this article. Stretch your placeholder to cover the entire screen. Now insert the following code in your configuration:

<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<style>
.pattern {
background:url("IMAGE URL HERE") repeat fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
display:flex;
}
</style>
</head>
<body>

<div class="pattern">&nsp;</div>

</body>
</html>



That’s it! If you end up using any of these effects, we would love to see what you created! Feel free to submit your work here in the comments below or to our gallery.

We are also hosting a contest where you will get a chance to win an Intel NUC by sharing your presentations.

Good luck!
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb

Posted 3 years ago

  • 3
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
 
Photo of LUIS REYES

LUIS REYES

  • 1,016 Points 1k badge 2x thumb
Hi, is it possible to use a gradient in a RSS Widget, i.e. at the Title Style-Background Color?
thanks
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
RSS is displaying text/image only, without background. You have to ways to do what you need. #1 apply background image/color/gradient (for gradient you gonna need to work in HTML view)  as the background for the placeholder containing the RSS Widget. #2 You also can put an empty placeholder under the placeholder with the RSS Widget and apply background using the image widget or html widget or whatever way you can think of.
Photo of LUIS REYES

LUIS REYES

  • 1,016 Points 1k badge 2x thumb
thanks