loading...
Cover image for location-based background - cool css trick

location-based background - cool css trick

shmuelhizmi profile image shmuelhizmi ・2 min read

this weekend I have transformed my project "web desktop environment" (which you can read more about here) into a to a PWA (progressive web app) and in the process of doing so, I learn a really cool trick that made my PWA fill much more alive, the trick was making the background of the PWA app window relative to his position.

live in action 🎞🎞

create one yourself

import React, { useState, useEffect } from "react";
// import our css styles
import "./styles.css";

export default function App() {
  const [top, setTop] = useState(0); // track to position of the window relative to the top
  const [left, setLeft] = useState(0); // track to position of the window relative to the left
  useEffect(() => {
    const loop = setInterval(() => {
      if (window.screen.availWidth - window.innerWidth === 0) { // check if we are in window maximize mode
// if we are in window maximize mode reset the background position        
        setTop(0);
        setLeft(0);
      } else { // else set the top and left states to the window location
        setTop(window.screenY)
        setLeft(window.screenX)
      }
    }, 500); // check only 2 times a second to avoid performance lost
return () => clearInterval(loop); // stop loop when component unmount
  }, [])
  return (
    <div className="App">
      <div
        className="Background"
        style={{
                    width: window.screen.width, //set the image full resolution base on screen resolution
                    height: window.screen.height,
                    transform: `translate(
            -${left && left % window.screen.availWidth /* in case we are running on a secondry ( left will be equal to primary screen + it's position on the relatve screen) screen we want to only get the position relative to the screen we are running on */}px,
            -${top && top - 40 /* remove 40px to account for top tabs and navigation bar */}px
             )`,}}
        />
    </div>
  );
}

/* fullscreen */
.App {
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.Background {
  background: url("https://picsum.photos/1920/1080"); /* random image api */
  position: absolute;
  transition: transform 400ms; /* animation for background position change */
}

demo

check out web desktop environment

GitHub logo shmuelhizmi / web-desktop-environment

a web/node-based cross-platform desktop environment

Web Desktop Environment

A cross-platform desktop-environment with a web interface

What is a Web Desktop Environment

just like any other desktop environment it is just a visual interface for your computer.
the twist with this desktop-environment is that "web-desktop-environment" visual interface runs on the web with his server running localy on your computer

Use Cases

  • interface for a cloud server (can possibly be used as a replacement for control panel)
  • interface for small/low power computers like the Raspberry Pi zero
  • interface for controlling your computer over a long distance

The technologies behind "web-desktop-devironment"

both the server and are build using a react framework called "react-fullstack" which is a framework for building fast react applications that rely a tight connection between the client and the server.

Screenshots

transparent dark dark theme transparent light theme pwa

Contribute

if you have any new feature or existing feature you wnat to create or improve fell free to open a Pull Request

Features

Desktop

✔️ full…

Discussion

pic
Editor guide
Collapse
felipperegazio profile image
Felippe Regazio

nice! if you try to apply on the element:

background-color: rgba(255,255,255,.6);
backdrop-filter: blur(5px);

would it create the same effect?

Collapse
shmuelhizmi profile image
shmuelhizmi Author

yep, if you put it in front of the image component it should work and get it to be blurry.