How to revert width:100% to just the length of the text?

Question

The blue background is 100% width and I just want it to be as wide as the text.

https://codepen.io/TylerL-uxai/pen/gRxMqG

.ux {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #3c99cd;
  background: rgba(60, 153, 205, 0.85);
  color: white;
}

<div class="header-img-ux">
  <h2 class="ux">User Experience Design</h2>
</div>

do you want it to be positioned at the bottom center of the page still? — Joel Glovacki, Jun 25 '17 at 06:26
Duplicate of https://stackoverflow.com/questions/14310154/how-do-i-set-background-color-of-text-only-in-css — DawnBringer, Jun 25 '17 at 06:32

Joel Glovacki · Accepted Answer · 2017-06-25T06:44:36.190

2

.ux {
  margin:0;
  position: absolute;
  bottom: 0;
  left: 0;
}
.ux span {
  background: #3c99cd;
  background: rgba(60, 153, 205, 0.85);
  color: white;
}

<div class="header-img-ux">
  <h2 class="ux"><span>User Experience Design</span></h2>
</div>

edited Jun 25 '17 at 06:44

answered Jun 25 '17 at 06:28

Joel Glovacki

813
5
14

@user6582640 in which browser? try adding display:inline-block? – Joel Glovacki Jun 25 '17 at 06:33
doesn't fix it either. Crap lol – Tyler L Jun 25 '17 at 06:37
@user6582640 oop, just looked at your codepen link. try wrapping in a `span` tag with the background color applied to that. https://codepen.io/saetia/pen/XgedBz – Joel Glovacki Jun 25 '17 at 06:45
Thank you @Joel!! – Tyler L Jun 25 '17 at 06:52

How to revert width:100% to just the length of the text?

1 Answers1