✨ Inspiration Post: Infinity Wall Backgrounds! ✨

  • 3
  • Article
  • Updated 2 years ago
  • (Edited)
infintybg infinitybg2

In this article, we cover a quick way to add an infinity wall background to your Presentation, like I have done here, and here.

Step 1

Git clone this repo, or copy all the HTML from this page which is located in that same repo.

Step 2

Create a new Presentation, add a Placeholder, and add the HTML Widget. Paste the code from the HTML page linked above into the HTML Widget. Save and Preview to see what the example looks like.

Step 3

In the CSS tag, locate .pattern and change the background-image url to your own:


.pattern { background-image: url('https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/Tiles/stardust.png'); }


Is the perspective tapering off?

There may be cases where the perspective prematurely tapers off the screen. If you are seeing this, do the following: In the CSS tag, locate .container, and then you will want to change the perspective property. Update the px values until the infinity background suits your Display width:


.container {
background: #222;
height: 100%;
margin: 0 auto;
overflow: hidden;
perspective: 1600px; /* You may need to change the px if it tapers off on your Display*/ }


You can use any of our Widgets on top of the infinity wall background. In these 2 examples, I've added the free Date and Time Widget above the HTML Widget. Check them out here and here.

Let us know if this post inspires you to create infinity wall backgrounds! We’d love to see them!
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 2 years ago

  • 3

There are no replies.