Como Fazer Uma Imagem De Fundo Em Um Site

Índice:

Como Fazer Uma Imagem De Fundo Em Um Site
Como Fazer Uma Imagem De Fundo Em Um Site

Vídeo: Como Fazer Uma Imagem De Fundo Em Um Site

Vídeo: Como Fazer Uma Imagem De Fundo Em Um Site
Vídeo: COMO INSERIR IMAGEM DE FUNDO (BACKGROUND) DO JEITO CERTO - HTML & CSS 2024, Maio
Anonim

Você pode aprender o básico sobre a construção de sites por conta própria; há informações suficientes sobre esse tópico na Internet e em livros. No entanto, no estágio inicial, muitas vezes surgem dificuldades no uso de uma ou outra tag. Na verdade, os componentes mais comuns são mais lembrados, pois são essenciais ao escrever qualquer site.

Como fazer uma imagem de fundo em um site
Como fazer uma imagem de fundo em um site

Instruções

Passo 1

Selecione a imagem que deseja usar como imagem de fundo. Se pretende inserir texto sobre a ilustração, neste caso é aconselhável limitar-se a opções sem excessiva variação, nas quais se utilizam várias cores de natureza próxima. Em princípio, para eliminar ondulações, você pode criar um "plano de fundo" para o conteúdo - e o problema será resolvido com sucesso.

Passo 2

Corrija a imagem usando Adobe Photoshop. Quando terminar, escolha o comando Salvar para a Web no menu Arquivo e selecione a pasta desejada. Se esta for a primeira imagem a ser usada para o site, uma pasta "Imagens" será criada automaticamente.

etapa 3

Na tag, escreva o atributo background = "path to image". Exemplo de registro: ou. Ao mesmo tempo, lembre-se de que a tag deve aparecer apenas uma vez no código, não deve ser multiplicada.

Passo 4

Salve as alterações no bloco de notas, clique no botão "Atualizar" do navegador. O papel de parede aparecerá na tela. Se as dimensões da imagem forem menores do que os parâmetros da página web, a imagem será duplicada quantas vezes forem necessárias para preencher todo o espaço. Existem duas maneiras de corrigir essa deficiência:

• usando o programa Adobe Photoshop, defina os parâmetros de imagem necessários em pixels ("Imagem" - "Tamanho da imagem");

• definir as dimensões necessárias no código html.

Por exemplo, se a largura for 1250 px e a altura for 650 px, você precisará adicionar os atributos necessários para a célula da tabela na qual a imagem será colocada.

Você não pode definir o tamanho na tag - a imagem sempre será exibida em tamanho real.

Etapa 5

Análogo de ccs para inserir uma imagem de fundo:

imagem de fundo

CORPO {

imagem de fundo: url (images / bg.jpg);

}

O atributo "background-image: url (images / bg.jpg)" é o caminho para a imagem de fundo.

Recomendado: