Multiple CSS Backgrounds

Developer
Aitor
Size
2,980 Kb
Views
36,432
  1. Multiple CSS Backgrounds Previews
  2. Multiple CSS Backgrounds HTML Codes
  3. Multiple CSS Backgrounds CSS Codes
  4. Multiple CSS Backgrounds JS Codes

How do I make an multiple css backgrounds?

What is a multiple css backgrounds? How do you make a multiple css backgrounds? This script and codes were developed by Aitor on 16 September 2022, Friday.

Multiple CSS Backgrounds Previews
IQ Test

Multiple CSS Backgrounds - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multiple CSS Backgrounds</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Multiple CSS Backgrounds - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; background: #000;
}

Multiple CSS Backgrounds - Script Codes JS Codes

"use strict";
function createBackground(depth) { return new Promise(function (resolve, reject) { var canvas = document.createElement("canvas"); canvas.width = 256; canvas.height = 256; var context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < 100; i++) { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; context.fillStyle = "rgb(" + depth + "," + depth + "," + depth + ")"; context.fillRect(x, y, 1, 1); } canvas.toBlob(function (blob) { return resolve(URL.createObjectURL(blob)); }, "image/png"); });
}
var bgs = [];
var sx = 0, sy = 0;
function frame() { sx += 2; sy += 2; document.body.style.backgroundPositionX = bgs.map(function (bg, index, list) { return sx * (index + 1) * (1 / list.length) + "px"; }).join(","); document.body.style.backgroundPositionY = bgs.map(function (bg, index, list) { return sy * (index + 1) * (1 / list.length) + "px"; }).join(","); requestAnimationFrame(frame);
}
Promise.all([createBackground(128), createBackground(192), createBackground(256)]).then(function (_ref) { var bg0 = _ref[0]; var bg1 = _ref[1]; var bg2 = _ref[2]; requestAnimationFrame(frame); bgs.push([bg0], [bg1], [bg2]); document.body.style.backgroundImage = bgs.map(function (_ref2) { var url = _ref2[0]; return "url(" + url + ")"; }).join(","); console.log(bg0, bg1, bg2);
});
Multiple CSS Backgrounds - Script Codes
Multiple CSS Backgrounds - Script Codes
Home Page Home
Developer Aitor
Username AzazelN28
Uploaded September 16, 2022
Rating 4
Size 2,980 Kb
Views 36,432
Do you need developer help for Multiple CSS Backgrounds?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aitor (AzazelN28) Script Codes
Name
Dancing Text
Physics 101
Countdown
Circuitry
AudioContext Concept
Galaxy Preview
Follow the lines
Fire
WebGL Point Sprites
Clock
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!