Font Background

TL;DR Summary – Font Background

If you want to achieve the effect of font background then all you need to do is set the “regular” background to an HTML element.

But you must set that background to some inline element like span as it won’t work by default on elements like div (background on a div will set color to an entire div element and not just behind the font / text).

Here is the full code for the image above:

<style>
  body { 
    background-color: lightgray; 
  }
  div { 
    font-size: 40px; 
    margin-top: 300px;
    text-align: center; 
  }
  span {
    background-color: yellow;
  }
</style>

<div>
  Do you know how to make
  <span>font background</span> 
  like this?
</div>

In short that is it.

More Details

If you set background to a div element like this…

div { 
  font-size: 40px; 
  margin-top: 300px;
  text-align: center; 
  background-color: yellow;
}
span {
  
}

…then an entire “box” will get the background color:

Another option is to change display property of the div element to inline like this:

div { 
  font-size: 40px; 
  margin-top: 300px;
  text-align: center; 
  background-color: yellow;
  display: inline;
}
span {
  
}

But that only gives you the option to set font background to an entire text and also it will probably mess up existing styling of div element which depends upon being a block element:

As you can see exiting margin property stopped working for div element. So your best option is to use the solution from the beginning of this article and just wrap the text you want to highlight with span elements.

This is really all there is to setting font background with HTML and CSS.

Also, you can check out similar blog post about INPUT background color.

Until next time,
Will
Senior Developer Content Writer