Background Color Size fit with Text?

Question

See my codepen. I look to make the blue background color scale to fit with the text, "My Pet". I tried display: inline and padding, but I couldn't figure out how to set the background to fit with the text responsively, rather than being full width. Also, how can I set the opacity of the background color but not the text?

After googling, I still struggle to find a solution.

HTML:

<div class="myDiv">
    <div class="bgImage">
        <h1>My Pet</h1> 
    </div>
</div>

CSS:

.myDiv h1 {
    font-family: 'Gabriela', serif;
    color: #FFF;
    margin: auto;
    text-align: center;
    font-size: 3.5em; 
    border-radius: 20px;
    background-color: #2ba6cb;  
/*  padding: 0.5em 0.2em 0.8em 0.5em;*/
}

Provide what you have tried thus far. – austin wernli Dec 08 '14 at 23:28 — austin wernli, Dec 08 '14 at 23:28
yes, I add codePen example :) – thunderRX5 Dec 08 '14 at 23:32 — thunderRX5, Dec 08 '14 at 23:32

score 9 · Accepted Answer · answered Dec 08 '14 at 23:37

9

Is this what you're trying to achieve?

.myDiv {
  text-align: center;
}

.myDiv h1 {
  display: inline-block;
  font-family: 'Gabriela', serif;
  color: #FFF;
  font-size: 3.5em;
  border-radius: 20px;
  background: rgba(43, 166, 203, 0.5 /* alpha value for background */);
  padding: 0.5em 0.2em 0.8em 0.5em;
}

<div class="myDiv">
  <h1>My Pet</h1> 
</div>

answered Dec 08 '14 at 23:37

Ana

35,599
6
80
131

Yes Ana, that's what I am looking for. Appreciate it. – thunderRX5 Dec 09 '14 at 00:01
I want to add Vote Up for all these replies, but require 15 reputations, sigh. – thunderRX5 Dec 09 '14 at 00:06

score 2 · Answer 2 · answered Dec 27 '21 at 13:27

even shorter

width: max-content;

.myDiv h1 {
    font-family: 'Gabriela', serif;
    color: #FFF;
    margin: auto;
    text-align: center;
    font-size: 3.5em; 
    border-radius: 20px;
    background-color: #2ba6cb; 
    width:max-content; 
    padding:2px 20px;
}

<div class="myDiv">
    <div class="bgImage">
        <h1>My Pet</h1> 
    </div>
</div>

score 1 · Answer 3 · answered Dec 08 '14 at 23:38

Is that what you were trying to get? This way you can set opacity of bgImage

.myDiv h1 {
    font-family: 'Gabriela', serif;
    color: #FFF;
    margin: auto;
    text-align: center;
    font-size: 3.5em; 
}

.myDiv {
  text-align:center;
}

.myDiv .bgImage{
  display:inline-block;
  background-color: #2ba6cb;
      border-radius: 20px;
    padding: 0.5em 0.2em 0.8em 0.5em;
}

<div class="myDiv">
    <div class="bgImage">
        <h1>My Pet</h1> 
    </div>
</div>

score 1 · Answer 4 · answered Dec 08 '14 at 23:42

You can just display your h1 as a table-cell and add the required padding around the text.

Note the last two rules to selector below....

.myDiv h1 {
    font-family: 'Gabriela', serif;
    color: #FFF;
    margin: auto;
    text-align: center;
    font-size: 3.5em; 
    border-radius: 20px;
    background-color: #2ba6cb;  
    display: table-cell;
    padding: 0 0.5em ;
}

Background Color Size fit with Text?

4 Answers4

Linked