CODEWITHSUNDEEP
htmlcss
Zain Shabir
Zain Shabir

Reputation: 99

background color on lines of paragraph seperately - Css

I am trying to add background color on lines of title, But I can't make it perfect as my client needs me to do. My client needs this exact same: enter image description here
And in responsive mode it should look like:
enter image description here
And what i did is this I add background-color to text, but it's not perfect.
enter image description here enter image description here
background color is spreading from top and bottom, tried a lot but can't figure it out.
Here is my code:

.sectionTitle {
    font-size: 58px;
    font-size: 3.0526315789rem;
    line-height: 56px;
    line-height: .9655172414;
    font-weight: bold;
    color: #233e57;
    text-align: center;
}
.sectionTitle span {
    background-color: #ffe2b3;
    display: inline;
}
<h1 class="sectionTitle"><span>What students are Saying?</span></h1>

Pleas help me to solve this.

Upvotes: 3

Views: 589

Answers (2)

Temani Afif
Temani Afif

Reputation: 272638

No need images, a simple gradient can do it and you will have better control over the color, size and everything

.sectionTitle {
    font-size: 58px;
    font-size: 3.0526315789rem;
    line-height: 56px;
    line-height: .9655172414;
    font-weight: bold;
    color: #233e57;
    text-align: center;
}
.sectionTitle span {
    background: 
      linear-gradient(#ffe2b3,#ffe2b3) 
      center/
      100% 60%  /* adjust this to control the size*/
      no-repeat;
}
<h1 class="sectionTitle"><span>What students are Saying?</span></h1>

Upvotes: 1

vadivel a
vadivel a

Reputation: 1794

Hope this help you.

.sectionTitle {
  font-size: 58px;
  font-size: 3.0526315789rem;
  line-height: 56px;
  line-height: .9655172414;
  font-weight: bold;
  color: #233e57;
  text-align: center;
}

.sectionTitle span {
  display: inline;
  line-height: 0.2;
  padding: 0;
  background: url('https://i.ibb.co/QFNPT8G/bg.png');
  background-repeat: repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat-x;
  background-size: 30px 40px;
  background-position: center center;
}
<h1 class="sectionTitle"><span>What students are Saying?</span></h1>

Upvotes: 3

Related Questions