How to make width be text and not div

Asked

Viewed 178 times

2

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

inserir a descrição da imagem aqui

CSS

div.header {
    background: url(../img/bg.jpg) no-repeat center center fixed; 
    -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 

    <div class="header">
            <h3>TITLE</h3>
    </div>
css

1 answer

6


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

  • display:inline-block; in the h3 to occupy only the necessary;

  • text-align:center; in div so that the h3 stay centered.

Click Run and see how it works:

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 http://www.wallpapers-for-desktop.eu

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.