1

Quero utilizar uma imagem no cabeçalho do site, ela é pequena e gostaria de repetí-la na horizontal por todo o header utilizando o CSS.

O HTML é o seguinte:

<body>
<header>
    <div id="cabecalho">
        <img src="pasta/imagem.jpg">
        <h1>Texto</h1>
        <h2>Texto</h2>
    </div>
</header>

Desde já agradeço a ajuda.

4
  • O que você tentou? Commented 26/04/2015 às 19:34
  • Tentei utilizar no css o background-repeat: repeat-x. Mas não sei se chamei o seletor correto. tentei ir diretamente em img{}, depois tentei header img{}, div#cabecalho img{}, etc.
    – Anderson
    Commented 26/04/2015 às 19:44
  • 1
    Cara, pra usar o background-repeat a imagem precisa ser definida pela propriedade background: url('caminho');, e não diretamente no HTML pela tag IMG.
    – user23124
    Commented 26/04/2015 às 19:47
  • também não funcionou Natan. Me manda um exemplo se puder.
    – Anderson
    Commented 26/04/2015 às 19:50

2 Respostas 2

4

Você não vai conseguir repetir a imagem usando o background-repeat: repeat-x; porque na verdade não existe nenhum background especificado. O que você precisa é carregar a imagem que você quer através do background-image:url(...). Ai sim você poderá dar instruções para ele. Exemplo:

#cabecalho {
    background-image:url('http://placehold.it/30x30');
    background-repeat:repeat-x;
}
<header>
    <div id="cabecalho">
        <h1>Texto</h1>
        <h2>Texto</h2>
    </div>
</header>

1
  • 1
    Muito obrigado. Descobri que meu maior problema era a url da imagem. Utilizei o background-image e deu certo. valeu mesmo! :)
    – Anderson
    Commented 26/04/2015 às 19:57
-1

Tente colocar:

#cabecalho {
    background-image:url('http://placehold.it/30x30');
    width: 100%;
    height: 150px;
}

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 .