Definir imagem de fundo em CSS

1. Use o background:url() para definir a imagem de fundo em CSS
2. Use o caminho relativo /image/picture para definir a imagem de fundo em CSS
3. Use o caminho relativo ../image/picture para definir o plano de fundo em CSS

Este artigo apresenta métodos para definir imagens de fundo em CSS. Discutiremos como definir o caminho da imagem para que a imagem de fundo seja exibida corretamente. Além disso, discutiremos os diferentes caminhos relativos.

Use o background:url() para definir a imagem de fundo em CSS

Podemos usar a propriedade background para definir a imagem de fundo em CSS. A função URL() manterá o caminho do arquivo da imagem como imagem de fundo. A propriedade background é a abreviatura de várias outras propriedades associadas ao background. Essas propriedades em ordem são background-color, background-image, background-repeat, background-attachement e background-position. Usando a propriedade background, podemos atribuir os valores para todas essas propriedades de uma forma resumida.

O ponto crítico em que podemos errar é ao escrever o caminho da imagem na função URL(). Devemos estar cientes da localização da imagem, e o caminho que está escrito na função URL() deve ser relativo ao arquivo CSS. Se escrevermos o CSS no próprio arquivo HTML, o caminho deve ser relativo ao arquivo HTML.

No exemplo abaixo, a imagem chamada picture está dentro da pasta image. A pasta image e o seguinte arquivo CSS style.css estão na mesma pasta. Portanto, o código a seguir definirá a imagem de plano de fundo.

A estrutura da pasta é mostrada abaixo:

web
├── style.css
├── HTML
│ └── test.html
└── image
 └── picture

Código de exemplo:

body {
    background: url(image/picture);
}

Use o caminho relativo /image/picture para definir a imagem de fundo em CSS

Podemos usar o formato de caminho de arquivo /image/picture para definir a imagem de fundo em CSS. Nesse formato, a imagem está localizada dentro da pasta image. A pasta image está localizada na raiz da web atual.

No exemplo abaixo, definimos a imagem picture como imagem de fundo. A localização do arquivo CSS não importa neste formato. Não precisamos escrever o caminho do arquivo relativo ao arquivo CSS. O caminho do arquivo é escrito em relação à raiz da web atual. Isso significa que a pasta imagem está no diretório raiz.

Código de exemplo:

body {
    background: url(/image/picture);
}

Use o caminho relativo ../image/picture para definir o plano de fundo em CSS

Podemos voltar a um nível em uma estrutura de diretório usando a notação ../. A notação ../ pode ser usada para escrever o caminho relativo do arquivo na função URL() enquanto define o fundo em CSS.

Por exemplo, temos um arquivo HTML test.html na pasta html. A pasta html encontra-se dentro da pasta web. A imagem picture está dentro da pasta image dentro da pasta web. Nessa estrutura de diretório, podemos usar o código a seguir para definir o plano de fundo.

A estrutura da pasta é mostrada abaixo:

web
├── CSS
├── HTML
│ └── test.html
└── image
 └── picture

No exemplo abaixo, escrevemos o CSS no próprio arquivo HTML. A notação ../ nos leva de volta à pasta web da pasta html. Em seguida, ele encontra a pasta image e o arquivo picture dentro da pasta image. Desta forma, podemos definir a imagem de fundo em CSS usando o caminho relativo.

Código de exemplo:

body {
    background: url(../image/picture);
}