How to repeat an HTML CSS image

Asked

Viewed 8,872 times

1

I want to use an image in the header of the site, it is small and I would like to repeat it horizontally throughout the header using CSS.

The HTML is as follows:: 

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

Thanks for your help.

html5 css3

  • What did you try?

  • I tried using the background-repeat: repeat-x in css. But I don’t know if I called the right selector. tried to go directly to img{}, then tried header img{}, div#cabecalho img{}, etc.

  • 1

    Dude, to use background-repeat the image needs to be defined by the property background: url('caminho');, and not directly in HTML by IMG tag.

  • didn’t work either, natan. send me an example if you can.

2 answers

4


You will not be able to repeat the image using the background-repeat: repeat-x; because there is actually no specified background. What you need is to load the image you want through the background-image:url(...). Then you can give him instructions. Example:

#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

    Thank you very much. I discovered that my biggest problem was the image url. I used the background-image and it worked. thanks anyway! :)

-1

Try to put:

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

Browser other questions tagged html5 css3

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