Replace YouTube background with custom tiled image + floating clouds + stars
// ==UserScript==
// @name YouTube Custom Background
// @namespace http://tampermonkey.net/
// @version 1.9
// @description Replace YouTube background with custom tiled image + floating clouds + stars
// @author $$
// @match https://www.youtube.com/*
// @license Copyright
// @icon https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/pngegg.png
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
GM_addStyle(`
@keyframes floatBG {
0% { transform: translateY(0px); }
50% { transform: translateY(40px); }
100% { transform: translateY(0px); }
}
@keyframes floatCloudLeft {
0% { transform: translate(0px, 0px); }
50% { transform: translate(-20px, -10px); }
100% { transform: translate(0px, 0px); }
}
@keyframes floatCloudRight {
0% { transform: translate(0px, 0px); }
50% { transform: translate(20px, -10px); }
100% { transform: translate(0px, 0px); }
}
@keyframes floatStarLeft {
0% { transform: translate(0px, 0px) rotate(0deg); }
50% { transform: translate(-12px, -8px) rotate(20deg); }
100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes floatStarRight {
0% { transform: translate(0px, 0px) rotate(0deg); }
50% { transform: translate(12px, -8px) rotate(-20deg); }
100% { transform: translate(0px, 0px) rotate(0deg); }
}
/* === BASE === */
html, body { background: transparent !important; }
ytd-app {
background: transparent !important;
position: relative !important;
}
/* Tiled background */
ytd-app::after {
content: '' !important;
position: fixed !important;
inset: -60px !important;
background-color: #ffb7c5 !important;
background-image: url('https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/vecteezy_greet-cinnamoroll-from-sanrio_53071648.svg') !important;
background-repeat: repeat !important;
background-size: 500px auto !important;
will-change: transform !important;
animation: floatBG 6s ease-in-out infinite !important;
z-index: -2 !important;
pointer-events: none !important;
}
/* Dark overlay */
ytd-app::before {
content: '' !important;
position: fixed !important;
inset: 0 !important;
background: rgba(0, 0, 0, 0.7) !important;
z-index: -1 !important;
pointer-events: none !important;
}
ytd-page-manager,
ytd-browse,
ytd-search,
ytd-watch-flexy {
background: transparent !important;
position: relative !important;
z-index: 1 !important;
}
/* === MASTHEAD === */
#masthead-container,
ytd-masthead {
background: transparent !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
position: relative !important;
}
ytd-masthead #background,
#frosted-glass { display: none !important; }
/* === SEARCH BOX === */
.ytSearchboxComponentInputBox,
.ytSearchboxComponentInputBoxDark {
background: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}
.ytSearchboxComponentInput {
background: transparent !important;
color: white !important;
}
.ytSearchboxComponentSearchButton,
.ytSearchboxComponentSearchButtonDark {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(8px) !important;
}
/* === SEARCH SUGGESTIONS === */
.ytSearchboxComponentSuggestionsContainer,
.ytSearchboxComponentSuggestionsContainerDark {
background: rgba(255, 255, 255, 0.25) !important;
backdrop-filter: blur(32px) !important;
-webkit-backdrop-filter: blur(32px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 12px !important;
}
.ytSuggestionComponentSuggestion:hover,
.ytSuggestionComponentHighlighted {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
}
.ytSuggestionComponentBold,
.ytSuggestionComponentText * {
color: white !important;
font-weight: bold !important;
}
/* === CHIPS BAR === */
ytd-feed-filter-chip-bar-renderer,
ytd-rich-grid-renderer #header,
#chips-wrapper,
yt-chip-cloud-renderer {
background: transparent !important;
box-shadow: none !important;
border-bottom: none !important;
position: relative !important;
}
yt-chip-cloud-chip-renderer {
background: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
}
#left-arrow, #right-arrow,
#left-arrow-button, #right-arrow-button,
ytd-feed-filter-chip-bar-renderer #left-arrow,
ytd-feed-filter-chip-bar-renderer #right-arrow {
background: transparent !important;
}
#left-arrow::before, #left-arrow::after,
#right-arrow::before, #right-arrow::after,
#left-arrow-button::before, #left-arrow-button::after,
#right-arrow-button::before, #right-arrow-button::after,
yt-chip-cloud-renderer::before, yt-chip-cloud-renderer::after {
background: none !important;
background-image: none !important;
box-shadow: none !important;
width: 0 !important;
display: none !important;
}
/* === ACCOUNT MENU === */
ytd-multi-page-menu-renderer {
background: transparent !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 12px !important;
}
ytd-multi-page-menu-renderer #header,
ytd-active-account-header-renderer,
ytd-compact-link-renderer,
ytd-toggle-theme-compact-link-renderer,
ytd-simple-menu-header-renderer,
yt-multi-page-menu-section-renderer {
background: transparent !important;
}
yt-multi-page-menu-section-renderer {
border-color: rgba(255, 255, 255, 0.1) !important;
}
ytd-multi-page-menu-renderer #submenu {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-radius: 12px !important;
}
ytd-compact-link-renderer tp-yt-paper-item:hover,
ytd-toggle-theme-compact-link-renderer:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
}
/* === SIDEBAR GUIDE === */
tp-yt-app-drawer {
--app-drawer-background-color: transparent !important;
}
tp-yt-app-drawer #contentContainer {
background: transparent !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 8px !important;
}
#guide-wrapper,
#guide-content,
#guide-content #header,
ytd-guide-renderer,
ytd-guide-section-renderer {
background: transparent !important;
}
ytd-guide-entry-renderer tp-yt-paper-item:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
}
/* === Nuclear fix — target semua kemungkinan === */
ytd-feed-filter-chip-bar-renderer,
ytd-tabbed-page-header,
ytd-tabbed-page-header *,
ytd-section-list-renderer #header,
ytd-section-list-renderer > #header,
#header.ytd-section-list-renderer,
ytd-item-section-renderer #header,
.ytd-tabbed-page-header {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
/* === CLOUDS & STARS === */
.yt-bg-cloud,
.yt-bg-star {
position: fixed !important;
pointer-events: none !important;
will-change: transform !important;
animation-timing-function: ease-in-out !important;
animation-iteration-count: infinite !important;
}
.yt-bg-cloud { z-index: 0 !important; opacity: 0.45 !important; }
.yt-bg-star { z-index: 0 !important; opacity: 0.85 !important; }
`);
const CLOUD_URLS = [
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/cloud-01.svg',
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/cloud-02.svg',
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/cloud-03.svg',
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/cloud-04.svg',
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/cloud-05.svg',
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/cloud-06.svg',
];
const STAR_URLS = [
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/star-01.svg',
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/star-02.svg',
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/star-03.svg',
'https://raw.githubusercontent.com/santosasarno-code/assets/refs/heads/main/star-04.svg',
];
const CLOUD_COUNT = 12;
const STAR_COUNT = 15;
function rand(min, max) { return Math.random() * (max - min) + min; }
function spawnElements() {
if (document.querySelector('.yt-bg-cloud')) return;
const fragment = document.createDocumentFragment();
for (let i = 0; i < CLOUD_COUNT; i++) {
const img = document.createElement('img');
img.src = CLOUD_URLS[Math.floor(Math.random() * CLOUD_URLS.length)];
img.className = 'yt-bg-cloud';
img.style.cssText = `width:${rand(100,200)}px;left:${rand(0,95)}vw;top:${rand(0,90)}vh;animation-duration:${rand(4,9)}s;animation-delay:-${rand(0,5)}s;animation-name:${Math.random()>.5?'floatCloudLeft':'floatCloudRight'};`;
fragment.appendChild(img);
}
for (let i = 0; i < STAR_COUNT; i++) {
const img = document.createElement('img');
img.src = STAR_URLS[Math.floor(Math.random() * STAR_URLS.length)];
img.className = 'yt-bg-star';
img.style.cssText = `width:${rand(20,55)}px;left:${rand(0,97)}vw;top:${rand(0,90)}vh;animation-duration:${rand(3,7)}s;animation-delay:-${rand(0,6)}s;animation-name:${Math.random()>.5?'floatStarLeft':'floatStarRight'};`;
fragment.appendChild(img);
}
document.body.appendChild(fragment);
}
function fixMasthead() {
const bg = document.querySelector('ytd-masthead #background');
if (bg) bg.style.setProperty('display', 'none', 'important');
const frosted = document.querySelector('#frosted-glass');
if (frosted) frosted.style.setProperty('display', 'none', 'important');
const masthead = document.querySelector('#masthead-container');
if (!masthead) return false;
masthead.style.setProperty('background', 'rgba(255,255,255,0.1)', 'important');
masthead.style.setProperty('backdrop-filter', 'blur(12px)', 'important');
masthead.style.setProperty('-webkit-backdrop-filter', 'blur(12px)', 'important');
return true;
}
function init() {
spawnElements();
let debounceTimer = null;
let mastheadFixed = false;
const observer = new MutationObserver(() => {
if (mastheadFixed) return;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
mastheadFixed = fixMasthead();
if (mastheadFixed) {
observer.disconnect();
// Watch hanya masthead container setelah fixed
const masthead = document.querySelector('#masthead-container');
if (masthead) observer.observe(masthead, { attributes: true, attributeFilter: ['style'] });
}
}, 500);
});
observer.observe(document.body, { childList: true, subtree: true });
fixMasthead();
}
if (document.body) {
init();
} else {
window.addEventListener('DOMContentLoaded', init);
}
})();