Text as background
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 - 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);
Developer | Niels Oeltjen |
Username | NielsOeltjen |
Uploaded | September 08, 2022 |
Rating | 4 |
Size | 2,292 Kb |
Views | 42,504 |
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!
Name | Size |
Expanding text links | 2,099 Kb |
Prototype for a menu pattern | 4,074 Kb |
CSS only audio player UI | 3,325 Kb |
Single element Adobe Brackets logo | 1,955 Kb |
Another nice loader | 2,267 Kb |
Prose.io repo icon | 2,162 Kb |
Semantic vertical centering | 2,394 Kb |
Animated css matrix type | 3,484 Kb |
Layout states using jQuery and Data Attributes | 3,078 Kb |
Animated background colours | 1,979 Kb |
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!
Name | Username | Size |
Flip test | Madhes | 1,635 Kb |
Promodoro | Bencarp | 1,712 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
TestTube CSS | EZPK | 2,710 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Lightrays v2 | Sinthetyc | 2,903 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!