OWebGL Fluid Enhanced

Custom Background

Set a custom background image or color

Background Image

Set the background image using CSS on the container element.

const container = document.querySelector('div');
 
container.style.backgroundImage =
  'url("https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg")';
 
// Optional CSS properties
container.style.backgroundSize = 'cover';
container.style.backgroundPosition = 'center';
container.style.backgroundRepeat = 'no-repeat';
 
const simulation = new Simulation(container);

Alternatively, you can position an absolute element behind the container

Remember to give the container a width and height

Config

To set a custom background, enable the transparent option.

simulation.setConfig({
  transparent: true,
});

Then start the simulation.

simulation.start();

On this page

Edit on GitHub