/* Custom site background styles - Put your background image in `source/img/` and reference it as `/img/your-bg.jpg` below. - Or use an external URL directly in the `background` property. - This stylesheet works with Butterly theme which uses #web_bg as the background container. */ /* Fullscreen fixed background (recommended) */ #web_bg { position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0; */ z-index: -1; /* Background will be set by random-bg.js at runtime. Keep this empty to avoid flicker. */ background: none; background-repeat: no-repeat; background-position: center center; background-size: cover; /* cover / contain / auto */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; transition: background 0.3s ease; pointer-events: none; /* doesn't block clicks */ } /* Optional: parallax effect (background moves slower) */ /* Uncomment to enable a simple parallax by keeping background-attachment fixed */ /* #web_bg { background-attachment: fixed; } */ /* Day / Night overlay: theme may toggle data-theme="dark" on or */ #web_bg::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0); /* default no overlay */ transition: background 0.3s ease; pointer-events: none; } [data-theme="dark"] #web_bg::after { background: rgba(0,0,0,0.45); /* darken in night mode */ } /* Fallback: if #web_bg missing, apply to body */ body.custom-bg-fallback { background-repeat: no-repeat; background-position: center center; background-size: cover; } /* Small-screen adjustments */ @media (max-width: 768px) { #web_bg { background-attachment: scroll; } } /* Quick helper class to switch to a solid color background */ .bg-solid { background: #f6f7f9 !important; } /* End of custom background stylesheet */