Font Background

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.

And if you want to learn how to raise your salary by 30% then click here:

raise salary by 30%

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:

font background center

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:

font background left

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.

And again, if you want to learn how to raise your salary:

raise salary by 30%

Until next time,
Will
Senior Software Developer