Webpage with a Background Image from a URL

The background image for this entire page is pulled directly from a web URL using CSS.

@keyframes backgroundMove { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } } .pipboy-screen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) perspective(1000px) rotateX(5deg); width: 80vw; height: 80vh; background-color: rgba(0, 20, 0, 0.08); border: 2px solid #0f0; box-shadow: 0 0 20px #0f0, 0 0 40px #0f0; overflow: hidden; display: flex; flex-direction: column; } .screen-content { flex-grow: 1; display: flex; flex-direction: column; padding: 20px; } .tabs { display: flex; border-bottom: 2px solid #0f0; } .tab { padding: 10px 20px; cursor: pointer; background-color: rgba(0, 50, 0, 0.5); border-right: 1px solid #0f0; } .tab:hover, .tab.active { background-color: rgba(0, 100, 0, 0.5); } .tab-content { display: none; flex-grow: 1; overflow-y: auto; } .tab-content.active { display: block; } .glitch { animation: glitch 1s linear infinite; } @keyframes glitch { 2%, 64% { transform: translate(2px,0) skew(0deg); } 4%, 60% { transform: translate(-2px,0) skew(0deg); } 62% { transform: translate(0,0) skew(5deg); } } .terminal::before { content: "> "; } .scan-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: rgba(0, 255, 0, 0.1); animation: scan 6s linear infinite; } @keyframes scan { 0% { top: 0; } 100% { top: 100%; } } #status-bar { padding: 10px; border-top: 2px solid #0f0; text-align: center; }
Status
Network
Hacking

System Status

System Status: Optimal OS Version: CyberOS v3.14 Firewall: Active Threads: 16/128 Memory Usage: 24%

Network Scan

Hack Interface

Launching Hack Interface... Target System: CorpNet Security Level: High Access Ports: Scanning...
Status: Connected | Battery: 45% | Signal Strength: Medium