Como Colocar Uma Imagem no Fundo de Uma div

Se você já tem um certo tempo com desenvolvimento web ou conhece pelo menos algumas propriedades CSS, você já deve estar ciente que ao usar CSS podemos alterar a aparência do site.

São diversos aspectos ou características que podem ser alteradas com esta ferramenta, e este processo de definir uma nova aparência ou característica para os elementos HTML é bastante simples.

Na verdade, são apenas 3 passos, o primeiro passo, é você escolher um seletor, segundo é você escolher a propriedade e por último, é você escolher o valor da propriedade.

Através deste processo, você vai conseguir alterar o valor de qualquer propriedade das tags HTML.

Neste artigo, você vai saber como colocar uma imagem de background em uma div.

Aprenda programar e desenvolver sistemas profissionais

Ambiente de desenvolvimento

Antes de prosseguimos com os exemplos, é importante que você esteja com o seu ambiente de desenvolvimento preparado, para isto, você vai precisar de um editor de texto e um navegador atualizado.

O editor de texto, você pode escolher um de sua preferência, o navegador também, mas, verifique se o navegador que você escolheu estar atualizado.

Se você tá com dúvida sobre qual navegador escolher, nós recomendamos que você use o Google Chrome ou Mozilla Firefox.

Agora, crie uma nova pasta com o nome do projeto, coloque qualquer nome para a pasta e crie ela a onde você quiser.

Logo depois, dentro da pasta que você criou, crie dois arquivos, o primeiro é o index.html, o segundo é style.css, e também crie uma pasta com o nome imagens e coloque qualquer imagem que você quiser.

Conheça o Curso Full-Stack da B7Web em detalhes.

Propriedades CSS

A partir deste momento, você vai conhecer algumas propriedades CSS que são usadas para alterar ou definir como o background de um elemento deve se comportar.

O que você vai encontrar logo mais abaixo, não é nada muito difícil, na verdade é bem simples, se você estiver com alguma dificuldade em memorizar.

Não se preocupe, pois, com o tempo e a prática, você vai ter bastante facilidade de usar qualquer propriedade CSS.

Propriedade background-image

Essa propriedade é usada para definir uma imagem que vai ser colocada no background de um elemento HTML, o valor que deve ser colocado nesta propriedade deve ser o endereço da imagem.

A estrutura do valor da propriedade e essa url(“caminho/imagem”), você deve colocar o caminho de imagem de forma correta, caso contrário, nenhuma imagem vai ser colocada no fundo.

Por padrão, quando se define uma imagem de background, ela é vai ficar posicionada ao topo e do lado esquerdo da tag.

Exemplo.

div {

    background-image: url("caminho/imagem");

}

Propriedade background-position

Como mencionado acima, por padrão é definido a posição da imagem de fundo, mas com a propriedade background-position você pode alterar essa posição.

Exemplo.

div {

    background-image: url("caminho/imagem");

    background-position: right center

}

No exemplo acima, a imagem vai ser posicionada ao centro e do lado direito, outros exemplos de valores são left top, left center, left bottom e right top.

Propriedade background-repeat

A propriedade background-repeat vai definir se uma imagem vai ou não repetir, e se caso for repetir, vai repetir na vertical ou na horizontal.

Exemplo para repetir na vertical.

div {

    background-image: url("caminho/imagem");

    background-repeat: repeat-y

}

Exemplo para repetir na horizontal.

div {

    background-image: url("caminho/imagem");

    background-repeat: repeat-x

}

Exemplo para repetir na vertical é horizontal.

div {

    background-image: url("caminho/imagem");

    background-repeat: repeat;

}

Exemplo para não repetir a imagem.

div {

    background-image: url("caminho/image");

    background-repeat: no-repeat;

}

Exemplo de como colocar uma imagem no background

Para tentar exemplificar melhor, abra os dois arquivos que você criou no editor de código, logo depois selecione o arquivo index.html e coloque todo o código que estar logo abaixo.

<!DOCTYPE html>

<html lang="pt-br">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <link rel="stylesheet" href="style.css">

        <title>Background</title>

    </head>

    <body>

        <div>

        </div>

    </body>

</html>

Agora no arquivo style.css, coloque o código que estar logo abaixo.

div {
    height: 500px;

    width: 500px;

    background-image: url("imagens/nome.jpg");

    background-position: center;

    background-repeat: no-repeat;

}

Aprenda programar e desenvolver sistemas profissionais

Conclusão

Para visualizar o resultado, basta você abrir o arquivo index.html em um navegador, se você quiser, tente outras variações para ver como fica o resultado.

Você só vai precisar alterar os valores das propriedades, se você quiser conhecer mais propriedades CSS, acesse w3schools.