DEV Community

Cover image for location-based background - cool css trick
shmuelhizmi
shmuelhizmi

Posted on

location-based background - cool css trick

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>
  );
}

Enter fullscreen mode Exit fullscreen mode
/* 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 */
}

Enter fullscreen mode Exit fullscreen mode

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

Installation and run guide

First, we need to make sure we have node and npm installed, I recommend using node 14.x with npm 7.x.
now we will install "web-desktop-environment" with the following commands -
npm install @web-desktop-environment/home-edition-server or npm install @web-desktop-environment/development-edition-server --unsafe-perm for the development edition of "web-desktop-environment".

After the "web-desktop-environment" server is installed we can run it using the command web-desktop-home or web-desktop-dev for the development edition of "web-desktop-environment".

Now that "web-desktop-environment" is running we can enter "https://web-desktop-environment.vercel.app" and connect to it.
to connect to the server we will need to enter the server host and port,
if we are running the server locally we can keep the default localhost host, otherwise enter the server host IP,
to get the server port we can look at the server console output, it should print somewhere in the start something along the…

Discussion (2)

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.