Guias

Como adicionar uma imagem a um arquivo CSS

As páginas da Web normalmente adicionam imagens usando a tag HTML "img" embutida. A codificação CSS geralmente não define a fonte de uma imagem porque CSS controla o design, e não o conteúdo. Ainda assim, o CSS oferece suporte a propriedades que o HTML simples não oferece, como a opacidade da imagem. Por exemplo, se você deseja que uma foto transparente da sede da sua empresa apareça na página inicial do seu site, você pode definir isso usando CSS. Os estilos CSS escolhem fontes de imagem usando a propriedade de imagem de fundo

1

Abra a folha de estilo do seu site com o editor de HTML ou um editor de texto.

2

Cole o seguinte código na folha para criar um novo estilo:

imagem de fundo: url (caminho); repetição de fundo: sem repetição; largura: 10px; altura: 20px; 

}

3

Substitua "caminho" pelo URL da imagem dentro do site. Por exemplo, se a imagem "building.jpg" estiver na pasta "images" do seu site, altere o código para:

imagem de fundo: url (/images/building.jpg); repetição de fundo: sem repetição; largura: 10px; altura: 20px; 

}

4

Substitua "10" pela largura da imagem e substitua "20" pela altura da imagem. Por exemplo, se a imagem mede 200 pixels de altura e 600 pixels de largura, altere o código para:

imagem de fundo: url (/images/building.jpg); repetição de fundo: sem repetição; largura: 600px; altura: 200px; 

}

5

Abra a página da Web onde deseja inserir a imagem.

6

Adicione o seguinte código para inserir a imagem: