How do I set a background-color for the width of text not the width of the entire element using CSS

Question

What I want is for the green background to be just behind the text  not to be 100  of the page width  Here is my current code    x000D   x000D  h1    x000D      text-align  center   x000D      background-color  green   x000D    x000D   lt h1 gt The Last Will and Testament of Eric Jones lt  h1 gt   x000D   x000D   x000D

User · Answer

Try this one   h1       text-align  center      background-color  green      visibility  hidden     h1 after       content  The Last Will and Testament of Eric Jones       visibility  visible      display  block      position  absolute      background-color  inherit      padding  5px      top  10px      left  calc 30  - 5px       Please note that calc is not compatible to all browsers    Just want to be consistent with the alignment in the original post   https   jsfiddle net richardferaro ssyc04o4

User · Answer

You can use the HTML5  lt mark gt  tag   HTML    lt h1 gt  lt mark gt The Last Will and Testament of Eric Jones lt  mark gt  lt  h1 gt    CSS   mark       background-color  green

User · Answer

x000D   x000D   lt h1 style  display inline-block text-align  center background   red   gt The Last Will and Testament of Eric Jones lt  h1 gt  x000D   x000D   x000D

User · Answer

EDIT  the answer below would apply in most cases  OP however later mentioned that they could not edit anything other than the CSS file  But will leave this here so it may be of use to others     The main consideration that others are neglecting is that OP has stated that they cannot modify the HTML    You can target what you need in the DOM then add classes dynamically with javascript  Then style as you need   In an example that I made  I targeted all  lt p gt  elements with jQuery and wrapped it with a div with a class of  colored       p    wrap    lt div class  colored  gt  lt  div gt        Then in my CSS i targeted the  lt p gt  and gave it the background color and changed to display  inline   colored p       display  inline      background  green      By setting the display to inline you lose some of the styling that it would normally inherit  So make sure that you target the most specific element and style the container to fit the rest of your design  This is just meant as a working starting point  Use carefully  Working demo on CodePen

User · Answer

Put the text in an inline element  such as a  lt span gt       lt h1 gt  lt span gt The Last Will and Testament of Eric Jones lt  span gt  lt  h1 gt    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

User · Answer

Option 1  display  table    no parent required    x000D   x000D  h1   x000D      display  table     keep the background color wrapped tight    x000D      margin  0px auto 0px auto     keep the table centered    x000D      padding 5px font-size 20px background-color green color  ffffff  x000D    x000D   lt h1 gt The Last Will and Testament of Eric Jones lt  h1 gt  x000D   x000D   x000D    fiddle  http   jsfiddle net J7VBV 293   more  display  table tells the element to behave as a normal HTML table would   More about it at w3schools  CSS Tricks and here    Option 2  display  inline-flex    requires text-align  center  on parent    x000D   x000D   container   x000D      text-align  center     center the child    x000D    x000D  h1   x000D      display  inline-flex     keep the background color wrapped tight    x000D      padding 5px font-size 20px background-color green color  ffffff  x000D    x000D   lt div class  container  gt  x000D     lt h1 gt The Last Will and Testament of Eric Jones lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D      Option 3  display  flex    requires a flex parent container    x000D   x000D   container   x000D    display  flex  x000D    justify-content  center     center the child    x000D    x000D  h1   x000D      display  flex  x000D         margin  0 auto  or use auto left right margin instead of justify-content center    x000D      padding 5px font-size 20px background-color green color  ffffff  x000D    x000D       lt div class  container  gt  x000D         lt h1 gt The Last Will and Testament of Eric Jones lt  h1 gt  x000D       lt  div gt  x000D   x000D   x000D    about  Probably the most popular guide to Flexbox and one I reference constantly is at CSS Tricks    Option 4  display  block    requires a flex parent container    x000D   x000D   container   x000D    display  flex  x000D    justify-content  center     centers child    x000D    x000D  h1   x000D      display  block  x000D      padding 5px font-size 20px background-color green color  ffffff  x000D    x000D   lt div class  container  gt  x000D     lt h1 gt The Last Will and Testament of Eric Jones lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D      Option 5    before   requires entering words in css file  not very practical     x000D   x000D  h1   x000D      display  flex     set a flex box    x000D      justify-content  center     so you can center the content like this    x000D    x000D   x000D  h1  before   x000D      content  The Last Will and Testament of Eric Jones      the content    x000D      padding  5px font-size  20px background-color  green color   ffffff  x000D    x000D   lt h1 gt  lt  h1 gt  x000D   x000D   x000D    fiddle  http   jsfiddle net J7VBV 457   about  More about css pseudo elements   before and   after at CSS Tricks and pseudo elements in general at w3schools    Option 6  display  inline-block    centering with position  absolute and translateX requires a position  relative parent    x000D   x000D   container   x000D    position  relative     required for absolute positioned child    x000D    x000D  h1   x000D    display  inline-block     keeps container wrapped tight to content    x000D    position  absolute     to absolutely position element    x000D    top  0  x000D    left  50      part1 of centering with translateX Y    x000D    transform  translateX -50       part2 of centering with translateX Y    x000D    white-space  nowrap     text lines will collapse without this    x000D    padding 5px font-size 20px background-color green color  ffffff  x000D    x000D     lt h1 gt The Last Will and Testament of Eric Jones lt  h1 gt  x000D   x000D   x000D    about  More on centering with transform  translate     and centering in general  in this CSS tricks article    Option 7  text-shadow  and box-shadow    not what the OP was looking for but maybe helpful to others finding their way here     x000D   x000D  h1  h2  h3  h4  h5  display  table margin  10px auto padding  5px font-size  20px color   ffffff overflow hidden   x000D  h1   x000D      text-shadow  0 0 5px green 0 0 5px green  x000D                   0 0 5px green 0 0 5px green  x000D                   0 0 5px green 0 0 5px green  x000D                   0 0 5px green 0 0 5px green  x000D    x000D  h2   x000D      text-shadow  -5px -5px 5px green -5px 5px 5px green  x000D                    5px -5px 5px green 5px 5px 5px green  x000D    x000D  h3   x000D      color  hsla 0  0   100   0 8   x000D      text-shadow  0 0 10px hsla 120  100   25   0 5   x000D                   0 0 10px hsla 120  100   25   0 5   x000D                   0 0 10px hsla 120  100   25   0 5   x000D                   0 0 5px hsla 120  100   25   1   x000D                   0 0 5px hsla 120  100   25   1   x000D                   0 0 5px hsla 120  100   25   1   x000D    x000D  h4      overflow hidden is the key to this one    x000D      text-shadow  0px 0px 35px green 0px 0px 35px green  x000D                   0px 0px 35px green 0px 0px 35px green  x000D    x000D  h5      set the spread value to something larger than you ll need to use as I don t believe percentage values are accepted    x000D    box-shadow  inset 0px 0px 0px 1000px green  x000D    x000D   lt h1 gt The First Will and Testament of Eric Jones lt  h1 gt  x000D   lt h2 gt The 2nd Will and Testament of Eric Jones lt  h2 gt  x000D   lt h3 gt The 3rd Will and Testament of Eric Jones lt  h3 gt  x000D   lt h4 gt The Last Will and Testament of Eric Jones lt  h4 gt  x000D   lt h5 gt The Last Box and Shadow of Eric Jones lt  h5 gt  x000D   x000D   x000D    fiddle  https   jsfiddle net Hastig t8L9Ly8o   More Options  There are a few other ways to go about this by combining the different display options and centering methods above

User · Answer

HTML   lt h1 class  green-background  gt  Whatever text you want   lt  h1 gt    CSS   green-background        text-align  center      padding  5px    Optional  Padding is just for a better style         background-color  green

User · Answer

As the other answers note  you can add a background-color to a  lt span gt  around your text to get this to work   In the case where you have line-height though  you will see gaps  To fix this you can add a box-shadow with a little bit of grow to your span  You will also want box-decoration-break  clone  for FireFox to render it properly   EDIT  If you re getting issues in IE11 with the box-shadow  try adding an outline  1px solid  color   as well for IE only   Here s what it looks like in action      x000D   x000D   container   x000D    margin  0 auto  x000D    width  400px  x000D    padding  10px  x000D    border  1px solid black  x000D    x000D   x000D  h2   x000D    margin  0  x000D    padding  0  x000D    font-family  Verdana  sans-serif  x000D    text-transform  uppercase  x000D    line-height  1 5  x000D    text-align  center  x000D    font-size  40px  x000D    x000D   x000D  h2  gt  span   x000D    background-color   D32  x000D    color   FFF  x000D    box-shadow  -10px 0px 0 7px  D32  x000D      10px 0px 0 7px  D32  x000D      0 0 0 7px  D32  x000D    box-decoration-break  clone  x000D    x000D   lt div class  container  gt  x000D       lt h2 gt  lt span gt A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW  3 lt  span gt  lt  h2 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

A very simple trick to do so  is to add a  lt span gt  tag and add background color to that  It will look just the way you want it    lt h1 gt         lt span gt The Last Will and Testament of Eric Jones lt  span gt   lt  h1 gt     And CSS  h1   text-align  center    h1 span   background-color  green      WHY    lt span gt  tag in an inline element tag  so it will only span over the content faking the effect

User · Answer

Easily    lt p gt lorem ibsum     lt  p gt   with styles   p      background-color   eee      display  inline       the background sets to the whole size of the element  revise the diffrence between inline elements and block elements from here

User · Answer

Try removing the text-alignment center and center the  lt h1 gt  or  lt div gt  the text resides in   h1       background-color green      margin  0 auto      width  200px

User · Answer

You have to mention the width of the h1 tag    your css will be like this  h1   text-align  center  background-color  green  width  600px

User · Answer

can use html5 mark tag within paragraph and heading tag    x000D   x000D   lt p gt lorem ipsum  lt mark gt Highlighted Text lt  mark gt  dolor sit  lt  p gt  x000D   x000D   x000D

User · Answer

HTML   lt h1 gt     lt span gt      inline text lt br gt        background padding lt br gt        with box-shadow    lt  span gt   lt  h1 gt     Css  h1    font-size  50px    padding  13px    Padding on the sides so as not to stick      span         background   111     background color     color   fff      line-height  1 3    The height of indents between lines      box-shadow  13px 0 0  111  -13px 0 0  111     Indents for each line on the sides          Demo on codepen

User · Answer

h1 is a block level element  You will need to use something like span instead as it is an inline level element  ie  it does not span the whole row    In your case  I would suggest the following   style css   highlight       background-color  green      html   lt span class  highlight  gt only the text will be highlighted lt  span gt

User · Answer

A little late to game but thought I would add my 2 cents     To avoid adding the extra mark-up of an inner span you could change the  lt h1 gt  display property from block to inline  catch is you would have ensure the elements after the  lt h1 gt  are block elements   HTML   lt h1 gt    The Last Will and Testament of Eric Jones lt  h1 gt    lt p gt Some other text lt  p gt    CSS  h1      display inline      background-color green      color  fff      Result   JSFIDDLE http   jsfiddle net J7VBV

[html] How do I set a background-color for the width of text, not the width of the entire element, using CSS?

Examples related to html

Examples related to css