How to make the width be the one of the text and not of the div

Navigation
1

I want the H3 background to take only the size of the text

CSS

div.header{background:url(../img/bg.jpg)no-repeatcentercenterfixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding-top:100px;padding-bottom:100px;}div.header>h3{margin:0;font-size:400%;font-weight:200;color:white;padding:10px;background-color:#222;text-align:center;}

HTML

<divclass="header">
            <h3>TITLE</h3>
    </div>
    
asked by anonymous 12.12.2016 / 02:39

1 answer

5

There are several ways, but I think for your CSS this is one of the simplest:

  • display:inline-block; no h3 to fill only what you need;

  • text-align:center; in div so that h3 is centralized.

Click run and see it working: 

div.header {
    background: url(https://i.stack.imgur.com/chXVu.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
    text-align:center;
}
div.header > h3 {
    margin: 0;
    display:inline-block;
    font-size: 400%;
    font-weight: 200;
    color: white;
    padding: 10px;
    background-color: #222;
    text-align: center;
}
<div class="header">
  <h3>TITLE</h3>
</div>


image from link

    
12.12.2016 / 02:48
How to know how many "black" pixels are in a letter x, using an x source? [closed] Change word displayed by php [closed]