1

enter image description here

html

<div class="jumbotron text-white tteesstt text-center">
    <h2 class="text-white" >ABOUT</h2>
    <h3 class="text-white">We invite you to enjoy a luxurious ground transportation service provided by our team of experts. We have the experience and skills to meet the expectations of every passenger and add value to every ride.</h3>
</div>

css

.tteesstt {
    background: url('../img/banner/about-suv.png') no-repeat;
    background-size: cover;
}
krlzlx
  • 5,752
  • 14
  • 47
  • 55
user5500116
  • 27
  • 3

2 Answers2

-1

An easy solution is to add the background element's to the h2 and h3. You can set background color to be some sort of grayish color and than add opacity, to mimic the blur effect.

This is very efficient in terms of rendering, and can reproduce, kind of what you are aiming to do. CSS example:

.h2 .h3{
background-color: #ffffff;
opacity:0.6;
}
desicne
  • 851
  • 2
  • 9
  • 23
-1

to blur the background of the text, create a div inside your ".tteesstt" element with class named "about-container" or whatever you wish to name it and add the h3 tags inside. add an opacity to the background-color of the "about-container" container like so; 

.about-container{ background-color: rgba(0,0,0,0.5);   }
N-BOT
  • 1