How to Create Seamless Scrolling Background using CSS
1 min read
Seamless Scrolling Background
Using CSS background-clip you can add some serious impact to a design element. Here you will learn how to add seamless scrolling background to header text that can change the look of your design.
HTML CODE
1 | <div class="bgdiv"> |
2 | <h1>CODE ME</h1> |
3 | </div> |
CSS CODE
1 | .bgdiv h1 { |
2 | margin: 0; |
3 | font-family: "Montserrat", sans-serif; |
4 | font-size: 15vh; |
5 | letter-spacing: 1vw; |
6 | position: absolute; |
7 | top: 15vh; |
8 | left: 50%; |
9 | transform: translateX(-50%); |
10 | color: white; |
11 | background: url("https://sarveshpathak.com/wp-content/uploads/2022/08/bg-e1661596289761.png"); |
12 | background-size: auto 200%; |
13 | background-clip: text; |
14 | text-fill-color: transparent; |
15 | -webkit-background-clip: text; |
16 | -webkit-text-fill-color: transparent; |
17 | animation: shine 8s linear infinite; border: 1px solid #eee; |
18 | } |
19 | .bgdiv h1:nth-child(2) { |
20 | top: 50vh; |
21 | } |
22 | @keyframes shine { |
23 | from { |
24 | background-position: center 0; |
25 | } |
26 | to { |
27 | background-position: center 200%; |
28 | } |
29 | } |
Result
CODE ME
About Post Author
