2

Quero que o background do H3 pegue somente o tamanho do texto

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>

1 Resposta 1

6

Maneiras há varias, mas creio que para o seu CSS essa seja uma das mais simples:

  • display:inline-block; no h3 para que ocupe só o necessário;

  • text-align:center; na div para que o h3 fique centralizado.

Clique em executar e veja em funcionamento:

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>


imagem vinda de http://www.wallpapers-for-desktop.eu

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .