Adicionar imagem de fundo em CSS
- Adicionar imagem de fundo em CSS quando a imagem e o arquivo CSS estiverem na mesma pasta
- Adicionar plano de fundo na imagem CSS quando a imagem, os arquivos HTML e CSS estiverem em uma pasta diferente
Este tutorial apresenta como adicionar imagens de fundo em CSS. Também explicará quais são os erros comuns ao adicionar imagens de fundo.
Adicionar imagem de fundo em CSS quando a imagem e o arquivo CSS estiverem na mesma pasta
Podemos imagens de fundo em CSS usando a propriedade background-image. Então, para o valor, podemos usar a função url() onde o nome da imagem ou o caminho da imagem é o parâmetro. A propriedade deve ser escrita após selecionar a tag body no CSS. Isso habilitará a imagem de fundo em todo o corpo da página da web. Devemos escrever o nome e o caminho da imagem de acordo com a estrutura de pastas do HTML, CSS e arquivo de imagem. Explicaremos alguns cenários de diferentes locais de imagem em relação aos arquivos HTML e CSS.
Se a imagem e o arquivo CSS estiverem localizados no mesmo diretório, podemos simplesmente escrever o nome da imagem na função url(). Por exemplo, temos a imagem bird.jpg em um diretório. Temos um arquivo CSS style.css no mesmo diretório; o código a seguir definirá a imagem de fundo.
Código de exemplo:
body{
background-image:url(bird.jpg);
}
Além disso, temos que nos certificar de que o caminho relativo dos arquivos HTML e CSS deve estar correto. Se o CSS for escrito internamente em HTML, a imagem e os arquivos HTML devem estar no mesmo diretório. Se eles não estiverem no mesmo diretório, o caminho relativo do arquivo CSS deve estar correto no arquivo HTML.
Adicionar plano de fundo na imagem CSS quando a imagem, os arquivos HTML e CSS estiverem em uma pasta diferente
Vamos supor que temos uma pasta HTML chamada index.html, um arquivo CSS chamado style.css e a imagem chamada bird.jpg. O arquivo HTML encontra-se em uma pasta html, o arquivo CSS está na pasta css e a imagem está na pasta imagem. Em tal estrutura de arquivo, devemos estar cientes de como devemos fornecer o caminho relativo do arquivo CSS e da imagem para que a imagem de fundo seja exibida. Em primeiro lugar, devemos ter certeza de que os arquivos HTML e CSS estão vinculados. O código a seguir vincula o arquivo HTML e CSS à estrutura de pastas mencionada acima.
Código de exemplo:
<head>
<link rel="stylesheet" href="../css/styles.css">
</head>
body{
background-image : url('../image/bird.jpg');
}
O símbolo ../ indica um passo atrás da pasta atual. Quando voltarmos um passo para trás da pasta html onde se encontra o index.html, chegaremos à pasta pai onde se encontra a pasta css. Então, podemos encontrar o arquivo style.css dentro da pasta css. Agora, temos que fornecer o caminho relativo de bird.jpg da mesma forma no arquivo CSS.
Como a pasta image está um passo atrás do arquivo CSS atual, ../ nos levará de volta à pasta pai. Em seguida, ele busca a pasta imagem onde está o bird.jpg. Assim, podemos definir a imagem de fundo em CSS sem falhas.
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn