How to Add a Highlight Behind The Text via CSS So It Looks Like Instagram-One Below

Background color for text (only)

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

Demo

Is it possible to add text above blurriness with CSS

No need to complicate with extra markup, use pseudo element

.blur {  height: 222px;  position:relative;  font-size:40px;  text-align:center;}
.blur:before {  content: "";  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ccc;  filter: blur(5px);  z-index:0;}.blur span {  position:relative;  z-index:1;}

<div class="blur"><span>Coming Soon</span></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.

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>

Outline effect to text

There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.

What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).

Use four shadows to simulate a stroked text:

.strokeme {
  color: white;
  background-color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

<div class="strokeme">
  This text should have a stroke in some browsers
</div>

How to position text over an image with CSS

How about something like this: http://jsfiddle.net/EgLKV/3/

Its done by using position:absolute and z-index to place the text over the image.

#container {  height: 400px;  width: 400px;  position: relative;}#image {  position: absolute;  left: 0;  top: 0;}#text {  z-index: 100;  position: absolute;  color: white;  font-size: 24px;  font-weight: bold;  left: 150px;  top: 350px;}

<div id="container">  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />  <p id="text">    Hello World!  </p></div>

How to highlight text using javascript

You can use the jquery highlight effect.

But if you are interested in raw javascript code, take a look at what I got
Simply copy paste into an HTML, open the file and click "highlight" - this should highlight the word "fox". Performance wise I think this would do for small text and a single repetition (like you specified)

function highlight(text) {
  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  var index = innerHTML.indexOf(text);
  if (index >= 0) { 
   innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
   inputText.innerHTML = innerHTML;
  }
}

.highlight {
  background-color: yellow;
}

<button onclick="highlight('fox')">Highlight</button>

<div id="inputText">
  The fox went over the fence
</div>

Hide text using css

This is one way:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}