Background Color for Text (Only)

How do I set a background-color for the width of text, not the width of the entire element, using CSS?

Put the text in an inline element, such as a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

And then apply the background color on the inline element.

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

An inline element is as big as its contents is, so that should do it for you.

Background color for text (only)

Yes. Add a <span> inside the <h1>, and apply the background colour and a line-height to it.

Demo

CSS: Add Background color only behind text and not entire section

Putting the element into the span will fix this issue. Try this:

<span style="background-color: black;">
This is a line
<br>
This is another line
</span>

Background-color only on the text field

Wrap your text inside a span. Like this

#hello span{  font-size:30px;  background-color:red;}

<div id="hello">  <span>Hello</span></div>

need background color on background of text only, which dynamically changes width

You can try with display: inline

body {
  background: #f0f0f0;
}

.signup-heading {
  max-width: 39%;
  position: absolute;
  left: 7%;
  top: 12%;
}

.signup-heading > h2 {
  display: inline;
  background: #fff;
  word-wrap: break-word;
  font-family: 'Circular';
  font-family: CircularStd;
  font-size: 45px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: normal;
  color: #2c2a2a;
}

<div class="signup-heading">
  <h2>Hi there, we are so happy to have you here!</h2>
</div>

How to add a background color only at the center part of a text? Like a thick strikethrough but only in the background

You may use a gradient (repeating if it is to be layed through a few lines) .

possible example (here using em for the demo ) :

body{
font-size:36px;/* demo purpose */
}
.home-section-title {
  font-family: 'Alegreya Sans SC', sans-serif !important;
  font-weight: normal;
  letter-spacing: 0.25em;
  color: #000000;
  background:repeating-linear-gradient(to bottom,transparent 0 0.35em ,#FFF5F3 0.35em 0.85em, transparent 0.85em 1.2em);
  text-align: center;
}

<h1 class=home-section-title>FLASH SALE</h1>
<h1 class=home-section-title>FLASH <br> SALE</h1>
<h2 class=home-section-title>FLASH SALE</h2>
<h2 class=home-section-title>FLASH <br> SALE</h2>
<h3 class=home-section-title>FLASH SALE</h3>
<h3 class=home-section-title>FLASH <br> SALE</h3>

How to apply background colour property to only the area on which the text is located?

Make <p> an inline-block element and give it a background color:

div {
  color: white;
  text-align: center;
  font-size: 50px;
}

p {
  background-color: black;
  display: inline-block;
}

<div>
  <p>Paragraph</p>
</div>

---

Related Topics