Text with Background Image
How do I make an text with background image?
Simple text with background image. Using -webkit-background-clip and -webkit-text-fill-color.. What is a text with background image? How do you make a text with background image? This script and codes were developed by Kevin Weber on 20 November 2022, Sunday.
Text with Background Image - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text with Background Image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 id="textured-text">
Text with background image.
</h1> <script src="js/index.js"></script>
</body>
</html>
Text with Background Image - Script Codes CSS Codes
#textured-text { -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); background-attachment: scroll; background-clip: text; background-color: rgb(255, 255, 255); background-image: url(http://lorempixel.com/800/400/abstract); background-size: cover; color: rgb(34, 34, 34); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 60px; font-weight: 400; line-height: 1em; text-fill-color: rgba(0, 0, 0, 0); text-transform: uppercase;
}
Text with Background Image - Script Codes JS Codes
/* Additional JS is required/recommended for cross-browser compatibility
var prefixes = ['', 'Webkit', 'Moz', 'O', 'ms', 'Khtml'];
// Detect the android native browser
var nua = navigator.userAgent;
var is_android_native = ( nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1 );
// Test for e.g. 'background-clip: text;' support.
results['background-clip'] = checkForProperty('backgroundClip') && !is_android_native;
[...]
*/
Developer | Kevin Weber |
Username | kevinweber |
Uploaded | November 20, 2022 |
Rating | 3 |
Size | 2,084 Kb |
Views | 38,456 |
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 |
Fill circle from bottom to top in percent | 2,760 Kb |
Mark text on hover | 1,678 Kb |
CSS-only link confirm dialog | 2,601 Kb |
CSS Loading Animation Circle | 2,103 Kb |
Zoom background cover image on hover | 1,874 Kb |
Slack Icon Letter Generator | 1,946 Kb |
Change link color from left to right | 1,977 Kb |
Auto-generated mesh with triangles | 3,307 Kb |
CSS triangles | 1,472 Kb |
SqueezeText demo | 4,001 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 |
Sort the Knowlege | Eprouver | 3,915 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Knob rotation | Alemesre | 2,122 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Speech bubbles | Something | 1,547 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!