Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background color for text (only)

I am wondering if it's posible to achieve this:

enter image description here

I mean, applying the background color just to the text instead of the whole block,

ej

<h1>WELLCOME TO RENTAL IN MALLORCA BEATYFULL COLLECTION OF APPARTMENTS</h1>

Is there a (cross browser, if possible) way to do this?

like image 560
Toni Michel Caubet Avatar asked May 16 '13 20:05

Toni Michel Caubet


2 Answers

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

Demo

like image 61
Niet the Dark Absol Avatar answered Oct 19 '22 11:10

Niet the Dark Absol


In addition to Niet's answer:

to get extra space (here 10 px) on the left and right side of every line add this to the span:

h1 span {
  box-shadow: 10px 0 0px 0px #EDC330, -10px 0 0px 0px #EDC330;
}
like image 30
macrozone Avatar answered Oct 19 '22 11:10

macrozone