Home > Other > Multiple.js – Sharing background across Multiple Elements
Multiple.js - Sharing background across Multiple Elements

Multiple.js – Sharing background across Multiple Elements

An experiment in sharing background across multiple elements using CSS without any coordinates processing by JavaScript.

Surfing over dribbble I stumbled upon a Xonom design by Cosmin Daniel Capitanu. I wondered how to accomplish such “background sharing across multiple elements” effect at HTML/CSS without any coordinates processing by JavaScript. This page is result of my research by this topic.

Check original Xonom and notice how background gradient shares across multiple elements. Note that icons and text at lighter layers have gradient-color from darker layers, creating the illusion of underlying violet layer. In addition to that, layers pass background image (girl) with equal transparency so that layers can not be superimposed on each other. All this things can be implemented at CSS.

Browsers support

  • Any desktop browser that supports background-attachment:fixed
  • Mobile browsers that supports position: fixed and clip:rect(). I haven’t chance to test it everywhere so if it doesn’t work for you, create an issue and I’ll update supported device list.

Please note, this is experimental library so performance of page may be low because of usage of intensive CSS properties to achieve desired effects.

  Website Demo

About admin