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-based cross-platform desktop environment

Web Desktop Environment

A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.

What is a Web Desktop Environment

just like any other desktop environment WDE was design to abstract the use of your computer is a visual way but the twist with WDE is that unlike other desktop environments, WDE was designed from the ground up to run on the web, and so the backend for WDE is made as an extensible web-server.

Why?

WDE usecases range from providing a slim interface for your raspberry pi to or any other micro-computer to proving an interface for developing on a remote super computer or inside a Docker container.
wehenever you need to work on a remote/cloud environment WDE can be a great choice. it can simplify and abstruct the way you interact with your server and allow to feel comfortable…

Top comments (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

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