Text does not display correctly with my css code, it should show background moving (gif) under text

[hendrikbez]

Using the h1, h2, and h3 with the following info in css (a,b and c) (titlte1, title2 and title3). I am not sure if I have done it correct in css, need help to find out what I an doing wrong, or did I missing something.

 

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

h1 .aa{ /* use to make text glow in dashboard.php */
    
 background-image: url("move.gif");
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: 80px;
  margin: 5px 0;   
    }
h2 .bb {  /* use to make text glow in dashboard.php */
  background-image: url("move.gif");
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: 40px;
  margin: 10px 0;
    }   
    
h3 .cc { /* use to make text glow in dashboard.php */
  background-image: url("move.gif");
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;y
  font-size: 40px;
  margin: 10px 0;
    }       



.title {
  font-family: 'Comic Neue', cursive;
  text-align: center;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: -1vh;
  letter-spacing: 1px;
  line-height:2
}
.title1 { /* use to make text glow in dashboard.php */
  font-family: 'Coming Soon', cursive;
  text-align: center;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 20vh;
  letter-spacing: 1px;
  line-height:2
}
.title2 { /* use to make text glow in dashboard.php */
  font-family: 'Allerta Stencil';
  text-align: center;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 1vh;
  letter-spacing: 1px;
  line-height:2
}

.title3 { /* use to make text glow in dashboard.php */
  font-family:  'Kanit', sans-serif;
  text-align: center;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 10vh;
  letter-spacing: 1px;
  line-height:2
}

<div class="row">
        <div class="col-12 col-sm-6 col-md-5">
            <div class="info-box">
                <div class="info-box-content">
                    <h1 class="cc" "title2">aaaaaaaaaaaaaaaaaaaaaaaa</h1>
                </div>
            </div>
        </div>
            <div class="col-12 col-sm-6 col-md-5">
                <div class="info-box mb-3">
                    <div class="info-box-content">
                        <h2 class="cc" "title2">AAAAAAAAAAAA</h2>
                    </div>
                </div>
            </div>
    </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="info-box mb-3">
              
                <div class="ms-3">
                    <h2 class="bb" "title2">AAAAAAAAAAAABBBBBBBBBBBBDDDDDDDDDDD</h2>
                </div>
            </div>
        </div>
ReplyReport

It should look like the 2 screenshots
 

[requinix]

Not easy to see this happening for ourselves with some CSS and HTML but no images or demo. Is this somewhere on the internet we can see in action?

[hendrikbez]

it is on my laptop, will make two small videos, how it should look and not working

[hendrikbez]

Should work like this video

[maxxd]

What's it doing now? Showing us what it should do doesn't really help.

One thing that I see off the at is that you're not actually calling background-clip; you're doing the webkit- prefix and a moz- prefix (as far as I can find this prefix doesn't actually exist), but never actually calling `background-clip: text`. That may be the issue, but again it's hard to tell without and example of what it's actually doing now.

[hendrikbez]

1 hour ago, maxxd said:

What's it doing now? Showing us what it should do doesn't really help.

One thing that I see off the at is that you're not actually calling background-clip; you're doing the webkit- prefix and a moz- prefix (as far as I can find this prefix doesn't actually exist), but never actually calling `background-clip: text`. That may be the issue, but again it's hard to tell without and example of what it's actually doing now.

This is what it is doing now

[maxxd]

Did you try actually applying `background-clip: text`?

[hendrikbez]

1 hour ago, maxxd said:

Did you try actually applying `background-clip: text`?

 background-clip: text; does not do it, still nothing

[maxxd]

OK, looking closer you've got more problems than just not using the correct definition. Your HTML is invalid - your h2 elements are I think supposed to be class title2 and aa or bb, but right now that's two separate string so "title2" is ignored entirely. Your CSS is repetitive and nested incorrectly - if you look at the blocks you've marked as making the text glow, they're all wrong. The first block will only target a div or span with a class of 'aa' inside and H1 element, the second will only target a div or span classed 'bb' inside an H2 element, and the third a div or span classed 'cc' inside an H3 element. So none of your markup matches those selectors. Get rid of the H1, H2, and H3 and define .aa, .bb, and .cc. Or, better yet, just define a 'glow' block and use that class on every text block you want to be styled that way.

The .title1, .title2, and .title3 classes have nothing to do with the effect you're trying to achieve so remove that comment and stop confusing yourself.

There's also at least one typo in your CSS that your IDE should warn you about.