How to Use Use Text as the Background with CSS

Is there a way to use use text as the background with CSS?

You can have an absolutely positioned element inside of your relative positioned element:

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}

<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>

How to put text color as a background image using CSS?

Here is a solution using mix-blend-mode: screen;

https://jsfiddle.net/08rh23tw/

.card-text {
  background: white;
  color: #000;
  height: 100%;
  mix-blend-mode: screen;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  text-align: center;
  padding: 30px;
}

.card {
  width: 400px;
  height: 600px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card bg-dark text-white">
    <img src="https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100&w=240" 
    class="card-img" alt="...">
    <div class="card-img-overlay">
     
      <p class="card-text">
        Content here.
      </p>      
    </div>
  </div>

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.

Make text appear above background in HTML + CSS

The Audio tag was on top of the text I guess, replace with this:

<audio autoplay loop> 
    <source src="seffelinie.mp3" type="audio/mp3"> 
</audio>

How to change the background color of TEXT in css

You can use display:table-cell

table-cell: Let the element behave like a <td> element - W3Schools

Also, unless you want to go back to the dark ages, this is well-supported

#div1 {  background: red;  color: white;  display: table-cell;}

<div id="div1">This is a sentence.</div>Lorem ipsum dolor sit amet, pri cu quod audiam molestie, sit an modo probo conceptam, vim nemore quodsi no. Postea possit ne pro. Ne mel mollis oportere laboramus. Eu dico eius omnes ius. Id vis nibh adipiscing, maiorum suscipit ius eu. Sonet viris antiopamnec in, est id equidem omnesque cotidieque, tritani detraxit qui cu.

How can I add a large faded text background via css?

I understand that an answer has been accepted for your question already, but I thought I could provide my two cents, just for the sake of completeness.

While there is no inherent problem with creating an additional <div> element to hold the text, I prefer using the ::after pseudo-element to create one. It's probably (IMHO) more semantically correct, but it really depends what purpose you want the text to serve as.

In my example, I have placed the text you want to appear in the background in a HTML data- attribute, say, data-bg-text:

<div class="bg-text" data-bg-text="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus.
</div>

And for your CSS, you simply have to create a pseudo-element, and assign content from the custom HTML data- attribute:

.bg-text {
    background-color: #aaa;
    overflow: hidden;
    padding: 20px 20px 100px 20px;
    position: relative;
    width: 400px;
}
.bg-text::after {
    color: #fff;
    content: attr(data-bg-text);
    display: block;
    font-size: 80px;
    line-height: 1;
    position: absolute;
    bottom: -15px;
    right: 10px;
}

See the fiddle here - http://jsfiddle.net/teddyrised/n58D9/ or check the proof-of-concept example below:

.bg-text {    background-color: #aaa;    padding: 20px 20px 100px 20px;    position: relative;    width: 400px;    overflow: hidden;}.bg-text::after {    color: #000;    content: attr(data-bg-text);    display: block;    font-size: 80px;    line-height: 1;    position: absolute;    bottom: -15px;    right: 10px;}

<div class="bg-text" data-bg-text="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus.</div>

CSS: How can I fix the background image and also create a text box?

The background image's dimensions are changing because of the background-size: cover; property.

background-size: cover

Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

Source: MDN

Change it to auto to keep the original proportions.

Now, for the text, wrap the heading tag in a div and add this css:

div {
    white-space: nowrap; /*important - see reference*/
    width: /*add your width*/;
    height: /*add your height*/;
    overflow: auto;
}

h4 {
    overflow: inherit;
    /*no need to inherit white-space, it will be inherited automatically*/
}

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.