How to give background-image for
tag

Question

I have tried something like this.But it did not work, Can any one kindly advise me how can I get that.

Expected output .

<div class="row">
  <div class="col-md-5">
    <h1 class="pl-4" style="font-size: 200px;line-height: 2;background-image: url('https://img.freepik.com/free-vector/gradient-wallpaper-background_1159-5356.jpg?size=626&ext=jpg');">10+</h1>
    <h3>Years of Experience</h3>
  </div>
  <div class="col-md-7">
  </div>
</div>

I know it can be done using SVG. I'm not sure you can do it using CSS only. — Pedro Lima, Sep 29 '20 at 12:01
Never mind, it can be done. I found this: https://css-tricks.com/image-under-text/ — Pedro Lima, Sep 29 '20 at 12:03

score 0 · Answer 1 · answered Sep 29 '20 at 12:07

Basically applying the CSS found here:

h1 {
   color: white;  /* Fallback: assume this color ON TOP of image */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

<div class="row">
  <div class="col-md-5">
    <h1 class="pl-4" style="font-size: 200px;line-height: 2;background-image: url('https://img.freepik.com/free-vector/gradient-wallpaper-background_1159-5356.jpg?size=626&ext=jpg');">10+</h1>
    <h3>Years of Experience</h3>
  </div>
  <div class="col-md-7">
  </div>
</div>

score 0 · Answer 2 · answered Sep 29 '20 at 12:08

There is the CSS-property background-clip: text; which can do this for you. The browser support is not yet complete though and you will have to use prefixes.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

h1 {
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

<h1>Hi there</h1>

As an alternative you could go for an actual image or an SVG.

How to give background-image for tag

tag

2 Answers2

How to give background-image for
tag