Here we create a Creative CSS Background Image Text Effect. We always use to do text effects on an out website title or heading.
Here are 2 simple steps to create background image text effect,
- Setting the CSS on
body
with align-items and background. - Setting the CSS on
heading
with background image and WebKit background property.

Creative CSS3 Typography Code
Here we setting up the CSS on the body and heading or any text block attribute. We set the body background and height in VH (Vertical Height).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body{ height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Bebas'; background: black; } h1{ font-size: 10rem; background: url('image.png'); background-position: bottom; -webkit-background-clip:text; color: transparent; } |
Now we create a heading and apply above CSS on that text. After that, we check the live view of the CSS Text effect image background.
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>Creative CSS3 Background Image Text Effect</title> </head> <body> <h1>PHPCODER.TECH</h1> </body> </html> |
Now you can check the complete live view of the CSS3 Background Image Text Effect.
See the Pen CSS Background Image Text Effect by Bikash Panda (@phpcodertech) on CodePen.
Also Check:
- 5 Best Free WordPress Themes for Coding Blog
- Auto Expand Input & Textarea Based on Text Length
- Open URL in New Tab Using JavaScript
- 4 Steps to Upload Image Using Ajax and JQuery
Happy Coding..!
Was this article helpful?
YesNo
Pingback: Best User Login Page Design Using Neumorphism - PHPCODER.TECH
Pingback: CSS background-image Properties - PHPCODER.TECH
Pingback: CSS background-image Properties – Exploring Latest Updates on Books, Courses, Syllabus, Colleges, University | Mahira Gate
Pingback: How to Write Comments in CSS - PHPCODER.TECH
Pingback: Show Preloader Using JqueryShow Preloader Using Jquery PHPCODER.TECH