Background-color only on the text field

Question

this is my code:

HTML:

<div id="hello">
Hello
</div>

CSS:

#hello {
  font-size:30px;
  background-color:red;
}

As you can see in the fiddle (https://jsfiddle.net/en27xg3b/), the background color is on all the div. I want it to be only where the "Hello" is.

I'm pretty sure it's a simple code, but I forget how to do it.

Possible duplicate of [How do I set background color of text only in CSS?](http://stackoverflow.com/questions/14310154/how-do-i-set-background-color-of-text-only-in-css) — , Dec 25 '16 at 15:59

pol · Answer 1 · 2016-12-25T15:59:59.110

3

#hello {
  font-size:30px;
  background-color:red;
display: inline-block;
}

<div id="hello">Hello</div>

#hello span {
  font-size:30px;
  background-color:red;
}

<div id="hello"><span>Hello</span></div>

edited Dec 25 '16 at 15:59

answered Dec 25 '16 at 15:56

pol

score 2 · Accepted Answer · answered Dec 25 '16 at 15:53

2

Wrap your text inside a span. Like this

#hello span{
  font-size:30px;
  background-color:red;
}

<div id="hello">
  <span>Hello</span>
</div>

answered Dec 25 '16 at 15:53

ab29007

Ah, I tried to do it with
instead of . Thanks
– Web O Dec 25 '16 at 15:54
Ten minutes and I'll can do it. haha – Web O Dec 25 '16 at 15:57
okay. thanks. and also `p` tag is a block level element by default so it covers full width. – ab29007 Dec 25 '16 at 15:58

score 1 · Answer 3 · answered Dec 25 '16 at 15:56

1

<div> tag is display block so it fill background full.

In this case, You only set display : inline; for <div> tag

answered Dec 25 '16 at 15:56

nartoan

MZaragoza · Answer 4 · 2016-12-25T16:00:59.253

0

but what you can do is have a style

<style>
span.highlight {
  background-color:red;
}
</style>

now in your html you can do

<div id="hello">
  <span class="highlight">
    Hello
   </span>
   More Text
</div>

edited Dec 25 '16 at 16:00

answered Dec 25 '16 at 15:57

MZaragoza

4 Answers4