How to Set a Web Page as the Desktop Background in macOS

This short guide will show you how to set a web page as your Desktop background using a fantastic little open-source app for macOS.

Using the app Plash you’ll be able to customize your desktop background like never before. There are quite a few features that make this app capable of a lot more than just displaying some static HTML on your desktop. You can add custom CSS and JavaScript to the website, interact with it, automatically reload the site at a specified interval, and much more.

Something to note right up front – the latest version of Plash requires macOS 11.3 (Big Sur) or later. There is an older version that works with 10.15, though not all features are supported. To install the older version just download and open the .zip file, drag-and-drop it to your Applications folder and then open it from there (and skip the first two steps in this guide).

Otherwise, start at step #1 below and we’ll go through a bunch of examples of ways to use Plash.

  1. Start by visiting Plash on the App Store, which will launch the App Store app. Click the GET button to start the installation process.
  2. install the Plash app in macOS

  3. Once it’s done, click the OPEN button.
  4. launch the Plash app from the App Store

  5. A ‘Welcome’ screen will appear. Give it a read and then click the Continue button.
  6. the Plash welcome screen

  7. Let’s jump right in and start using Plash. Click its icon from your menu bar (the new one that looks like a “splashing droplet”) and select Add Website… from the list of options.
  8. the Plash menu with an arrow pointing to Add Website

  9. For the sake of trying out the app, we’ll add one of the “really cool but not necessarily useful” sites to use as a desktop background first – WindowSwap. Enter the address: https://www.window-swap.com/Window in the provided space, and give it a name (doesn’t really matter what, something descriptive is helpful). Then click the Add button.
  10. adding a web page to use as a background in macOS

  11. Ta-da! Your desktop background will turn into a random video looking out of someones window.
  12. a macOS desktop with a web page as a video as the background
    click to enlarge

  13. You may have noticed a small Websites panel appeared once you added the first site to Plash. Ignore it for the time being – we’ll get to it in a minute or two.
  14. the Plash websites panel

  15. Once again click the Plash icon in your menu bar and select Add Website… from the list of options.
  16. the Plash menu with an arrow pointing to Add Website

  17. This time enter the address: https://bing-photo-of-the-day.netlify.app and hit the tab key on your keyboard. After a moment or two, the name should auto-populate to something like “Bing Photo of the Day for Plash” – once it does, click the Add button.
  18. adding the Bing Photo of the Day as the desktop background in Plash

  19. This time your desktop background becomes the full-screen Bing Photo of the Day!
  20. the Bing Photo of the day web page as a background in macOS
    click to enlarge



  21. Now that you’ve added two sites to Plash, you can switch between them using the menu bar icon. Click it and select Switch and you’ll see both of the sites we just added.
  22. the Switch menu in the Plash app

  23. Plash has some pretty advanced features that you can use to take the “web page as a desktop” thing to the next level. Once again click the Plash menu bar icon, select Add Website… and enter: https://calendar.google.com then click the Add button.
  24. adding Google Calendar as a desktop background on a Mac via Plash app

  25. Your desktop will switch to the Google Calendar sign-in page, which can be quickly fixed.
  26. the Google auth page as the desktop background of a Mac

  27. Fortunately you can interact with the web page you’ve set as the desktop. Click the Plash icon from the menu bar and select Browsing Mode
  28. Browsing Mode in the list of Plash options

  29. Plash will display a message that explains Browsing Mode – after you’ve read it click OK to close the window.
  30. the Browsing Mode description window

  31. Click inside of the Email or phone field and sign into Google Calendar the same way you would as if you were using a normal web browser.
  32. interacting with a web site set as the desktop on a Mac

  33. There it is! Your Google Calendar will now be displayed as your desktop background.
  34. You’ve probably noticed it doesn’t look… awesome. Here’s where some of the advanced Plash magic comes into play. Using a bit of code provided by the author of Plash, you can make the calendar look amazing by blending into the background with your normal desktop wallpaper (see screenshot below).
  35. a customized Google Calendar displayed as a background on a Mac
    click to enlarge

  36. Remember that Websites window we looked at briefly way back at step #7? Bring it up by selecting the Plash icon in your menu bar and then Websites… from the list of options. Hold down the control key and then click the Google Calendar entry. Select Edit…
  37. the Plash Websites panel with the context menu displayed on the Google Calendar entry

  38. From here you can add custom CSS or JavaScript to the web page being displayed on your desktop. Start by placing a check in the box labeled Use print styles (Note: this option requires macOS 11). Next up, copy and paste the following text into the CSS: field then click the Done button.
  39. * {
    background-color: transparent !important;
    color: white !important;
    }

    .QQYuzf,
    .gboEAb,
    header.NkK3Fc,
    .Hrn1mc {
    display: none !important;
    }

    [role="grid"] * {
    border-color: rgba(255, 255, 255, 0.3) !important;
    }

    .tNDBE:not(.Wyo4Qe),
    .SGWAac,
    .QIadxc:last-child {
    border: none !important;
    }

    [data-chips-dialog] {
    background-color: rgba(0 0 0 / 80%) !important;
    }

    adding custom CSS to a site in the Plash App

  40. Ta-da! Your Google Calendar now looks much cooler.
  41. a customized Google Calendar displayed as a background on a Mac
    click to enlarge



  42. If you still have Browsing Mode enabled you can interact with your calendar the same as if it were being displayed in a web browser.
  43. adding a new event in Google Calendar embedded in a macOS Desktop

  44. Of course that can get really annoying too, so just select the Plash icon and then Browsing Mode again.
  45. disable browsing mode in the Plash app

  46. You may also want to review the various settings and options – to do so, click the Plash icon and select Preferences…
  47. an arrow pointing to Preferences in a menu

  48. Review each of the tabs and make any changes you see fit.
  49. the Plash Preferences panel

  50. For more Plash site suggestions, custom CSS and other tips be sure to check out the user submitted content by visiting the Plash use-cases page.

If this article helped you, I'd be grateful if you could share it on your preferred social network - it helps me a lot. If you're feeling particularly generous, you could buy me a coffee and I'd be super grateful :)

buy a coffee for simplehelp.net


Home » Mac » How to Set a Web Page as the Desktop Background in macOS

Leave a Comment

Your email address will not be published. Required fields are marked *