Custom Image for Youtube Background

Replace the old boring flat background with whatever picture you like

  1. // ==UserScript==
  2. // @name Custom Image for Youtube Background
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.6
  5. // @description Replace the old boring flat background with whatever picture you like
  6. // @author Hoover
  7. // @match *://*.youtube.com/*
  8. // @grant none
  9. // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13.  
  14. // Only tested on dark mode. If you're using light mode, you're a lunatic.
  15.  
  16. (function () {
  17. 'use strict';
  18.  
  19. // Fill the array up with URLs to pictures
  20. const bgSources = [
  21. "https://i.kym-cdn.com/photos/images/original/000/581/296/c09.jpg",
  22. "https://i.kym-cdn.com/photos/images/original/000/581/296/c09.jpg"
  23. ]
  24.  
  25. function getRandomImageUrl(images) {
  26. const randomIndex = Math.floor(Math.random() * images.length);
  27. return images[randomIndex];
  28. }
  29.  
  30. // Select only one image from the array
  31. let bgImage = getRandomImageUrl(bgSources);
  32.  
  33. // Overriding and adding css styles
  34. let css = `
  35. html {
  36. background-image: url(${bgImage});
  37. background-attachment: fixed;
  38. background-size: cover;
  39. background-repeat: no-repeat;
  40. background-position: center;
  41. }
  42. html::after {
  43. content: '';
  44. position: absolute;
  45. top: 0;
  46. left: 0;
  47. width: 100%;
  48. height: 100%;
  49. z-index: -1;
  50. }
  51. html[dark],
  52. [dark] {
  53. --yt-spec-base-background:#0f0f0fbf;
  54. }
  55. #cinematics-container{
  56. display: none;
  57. }
  58. `;
  59. if (typeof GM_addStyle !== "undefined") {
  60. GM_addStyle(css);
  61. } else {
  62. let styleNode = document.createElement("style");
  63. styleNode.appendChild(document.createTextNode(css));
  64. (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  65. }
  66. })();