Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

Execute o bloco de código em tela cheia aqui no SOpt. Se estiver no , use o atalho ctrl + shift + m para iniciar o modo de design adaptável e ver como as linhas são posicionadas conforme a tela é redimensionada. No existe uma forma semelhante explicada nessa respostaexplicada nessa resposta.

Execute o bloco de código em tela cheia aqui no SOpt. Se estiver no , use o atalho ctrl + shift + m para iniciar o modo de design adaptável e ver como as linhas são posicionadas conforme a tela é redimensionada. No existe uma forma semelhante explicada nessa resposta.

Execute o bloco de código em tela cheia aqui no SOpt. Se estiver no , use o atalho ctrl + shift + m para iniciar o modo de design adaptável e ver como as linhas são posicionadas conforme a tela é redimensionada. No existe uma forma semelhante explicada nessa resposta.

removeu 150 caracteres do conteúdo
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

Mostrarei com as tags <span> e a ideia de Flexbox, mais pra frente eu edito a minha resposta com outras alternativas. Sua marcação ficará assim:

Mostrarei com as tags <span> e a ideia de Flexbox, mais pra frente eu edito a minha resposta com outras alternativas. Sua marcação ficará assim:

adicionou 142 caracteres ao conteúdo
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114
/* É o mesmo CSS, minificado */

*{box-sizing:border-box;margin:0;padding:0}header{background:url(https://i.sstatic.net/FFTx9.jpg) center center/cover;height:auto;padding:10% 10px;width:100%;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:center;justify-content:center}h2,span{-webkit-flex:1 0 auto;flex:1 0 auto}.line{background:#fff;margin-top:12px;height:4px;width:auto}h2{color:#fff;text-align:center}
<header>
    <span class='line'></span>
    <h2 class='title'>Olá, você me acha um título muito grande?</h2>
    <span class='line'></span>
</header>
/* É o mesmo CSS, minificado */

*{box-sizing:border-box;margin:0;padding:0}header{background:url(https://i.sstatic.net/FFTx9.jpg) center center/cover;height:auto;padding:10% 10px;width:100%;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:center;justify-content:center}h2,span{-webkit-flex:1 0 auto;flex:1 0 auto}.line{background:#fff;margin-top:12px;height:4px;width:auto}h2{color:#fff;text-align:center}
<header>
    <span class='line'></span>
    <h2 class='title'>Olá, você me acha um título muito grande?</h2>
    <span class='line'></span>
</header>

Execute o bloco de código em tela cheia aqui no SOpt. Se estiver no Firefox, use o atalho ctrl + shift + m para iniciar o modo de design adaptável e ver como as linhas são posicionadas conforme a tela é redimensionada. No existe uma forma semelhante explicada nessa resposta.

/* É o mesmo CSS, minificado */

*{box-sizing:border-box;margin:0;padding:0}header{background:url(https://i.sstatic.net/FFTx9.jpg) center center/cover;height:auto;padding:10% 10px;width:100%;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:center;justify-content:center}h2,span{-webkit-flex:1 0 auto;flex:1 0 auto}.line{background:#fff;margin-top:12px;height:4px;width:auto}h2{color:#fff;text-align:center}
<header>
    <span class='line'></span>
    <h2 class='title'>Olá, você me acha um título muito grande?</h2>
    <span class='line'></span>
</header>

Execute o bloco de código em tela cheia. Se estiver no Firefox, use o atalho ctrl + shift + m para iniciar o modo de design adaptável e ver como as linhas são posicionadas conforme a tela é redimensionada.

/* É o mesmo CSS, minificado */

*{box-sizing:border-box;margin:0;padding:0}header{background:url(https://i.sstatic.net/FFTx9.jpg) center center/cover;height:auto;padding:10% 10px;width:100%;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:center;justify-content:center}h2,span{-webkit-flex:1 0 auto;flex:1 0 auto}.line{background:#fff;margin-top:12px;height:4px;width:auto}h2{color:#fff;text-align:center}
<header>
    <span class='line'></span>
    <h2 class='title'>Olá, você me acha um título muito grande?</h2>
    <span class='line'></span>
</header>

Execute o bloco de código em tela cheia aqui no SOpt. Se estiver no , use o atalho ctrl + shift + m para iniciar o modo de design adaptável e ver como as linhas são posicionadas conforme a tela é redimensionada. No existe uma forma semelhante explicada nessa resposta.

Remoção da regra 'fixed' no background
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114
Carregando
adicionou 43 caracteres ao conteúdo
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114
Carregando
adicionou 43 caracteres ao conteúdo
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114
Carregando
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114
Carregando