Text as background

Developer
Size
2,292 Kb
Views
42,504

How do I make an text as background?

A semantic method for using text for a background. What is a text as background? How do you make a text as background? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.

Text as background Previews

Text as background - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text as background</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> <!-- Doc encoding must be UTF-8 for the data-bg attribute -->
<div> <h1>Semantic use of text as a background</h1> <p>Just some random content</p>
</div> <script src="js/index.js"></script>
</body>
</html>

Text as background - Script Codes CSS Codes

/* Some globals */
@import url(https://fonts.googleapis.com/css?family=Codystar:300);
*, *::after, *::before { padding: 0; margin: 0;
}
/* Body background */
body::after {	content: attr(data-bg); /*content: "My text"; if not using js*/	z-index: -1;	position: absolute;	top: 0;	left: 0;	right: 0;	bottom: 0;	background: #ff0078;	overflow-y: hidden;	text-align: justify;	speak: none;	font-family: 'Codystar', cursive;	font-size: 80px;	color: #ff90c4;
}
/* Just an example layout */
div {	text-align: center;	padding: 40px;	color: #191919;
}

Text as background - Script Codes JS Codes

/* Some js just for fun */
// Create the text for background
var txt = "https://www.elbone.com.au/"; // The text to use
txt.split(); // Split into array
// Loop over text to add spaces
var txt_now = '';
for (var i = 0; i < txt.length; i++) { txt_now += txt[i] + ' ';
}
// Repeat a few times to fill up space
var txt_rep = '', l = 0;
while(l < 100) { txt_rep += txt_now; l++;
}
// Apply to body tag using vanilla js
var attribute = document.createAttribute("data-bg");
attribute.nodeValue = txt_rep;
document.body.setAttributeNode(attribute);
Text as background - Script Codes
Text as background - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 4
Size 2,292 Kb
Views 42,504
Do you need developer help for Text as background?

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!

Niels Oeltjen (NielsOeltjen) Script Codes
Create amazing sales emails 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!