Como definir uma imagem de fundo em HTML: 13 etapas

5 partes:arquivos do conjunto Gravar o arquivo HTML Ver o arquivo HTML Compreender o código HTML Entender o código CSS

Se você quiser adicionar uma imagem para o seu site, tudo que você precisa é HTML. Se você deseja definir uma imagem de fundo do seu site, você precisa de HTML e CSS. meios HTML "HyperText Markup Language" e é o código que informa ao navegador o que mostrar em uma página web. meios CSS "Cascading Style Sheets" e é usada para alterar a aparência e a disposição de uma página da web. Para começar, você vai precisar a imagem de fundo que deseja usar em seu site.

parte 1arquivos do conjunto

Crie uma pasta para guardar a sua imagem de fundo arquivo HTML e. Crie uma pasta no seu computador e dar-lhe um nome que lhe permite identificá-la facilmente.

Você pode dar o nome que quiser, mas como você vai trabalhar com HTML, você melhor se acostumar a escolher shorts e uma palavra aos seus ficheiros e nomes de pastas.

Coloque a imagem de fundo na pasta HTML. Encontre a imagem que deseja usar como plano de fundo e guardá-lo para a pasta HTML.

Em geral, é aconselhável a utilização de imagens simples com padrões lisos e repetitivas como imagem de fundo para o texto que está acima do fundo pode ser lido facilmente.
Se você não tiver uma imagem, você pode baixar uma Internet imagem de fundo livre. Se você está prestes a baixar uma imagem, certifique-se de guardá-lo para a pasta HTML.

Crie um arquivo HTML. Abra um editor de texto e criar um novo arquivo. Salve o arquivo com o nome index.html.

Você pode usar o editor de texto que quiser, até mesmo editores de texto que vêm com o (Notepad no caso do Windows e TextEdit no caso do Mac) do sistema operacional.
Se você quiser usar um editor de texto especialmente concebido para trabalhar com HTML, clique aqui para baixar Atom, um editor de texto que funciona com os sistemas operacionais Windows, Mac OS X e Linux.
Se você estiver usando o TextEdit, antes de começar a escrever o arquivo HTML, clique no menu "formato" em seguida, selecione "Faça texto simples" (ou "Converter para texto simples".) Desta forma, você irá garantir que o arquivo HTML é carregado corretamente em um navegador web.
processadores de texto como o Microsoft Word, não são uma boa opção para escrever um código HTML que adicionar caracteres e formato invisíveis. Esses personagens podem estragar o arquivo HTML e não são exibidos corretamente em um navegador web.

parte 2Gravar o arquivo HTML

Copie e cole o padrão HTML. Selecione e copie o código abaixo e cole-o no arquivo index.html aberta.

lt;htmlgt;lt;cabeçagt;lt;títulogt; página de títulolt;/títulogt;lt;estilogt; body {background-image: url (" ") -}lt;/estilogt;lt;/cabeçagt;lt;corpogt;lt;/corpogt;lt;/htmlgt;

Adicionar o URL da imagem. Pesquisar na linha do arquivo index.html background-image: url (" ") -. Coloque o cursor entre os parênteses e digite o nome do arquivo que contém a imagem de fundo. Certifique-se de incluir a extensão do arquivo de imagem.

Ao terminar, ele vai ficar assim:
background-image: url ("imagendefondo.jpg") -

Cada vez que você usar um nome de arquivo sem o caminho ou URL, o navegador irá procurar a imagem na pasta onde a página da Web é salvo. Se o arquivo estiver em outra pasta no seu sistema, você tem que adicionar o caminho completo do arquivo.

Salve o arquivo HTML.

parte 3Ver o arquivo HTML

Abra o arquivo HTML em um servidor web. O botão direito do mouse no arquivo index.html e selecione a opção para abri-lo usando o navegador da web que você deseja.

Se quando você abrir o browser a imagem não aparecer, certifique-se o nome da imagem é escrito corretamente na janela do editor de texto onde você criou index.html.
Se a imagem é o código HTML para abrir o navegador, em vez de aparecer, isso significa que o arquivo index.html é salvo como um documento de texto rico. Teste de editar o código HTML com outro editor de texto.

Editar o arquivo HTML. Na janela do editor de texto, coloque o cursor entre as tags e e em seguida, escrever "Olá mundo!". Atualize a janela do navegador para ver se o texto aparece acima da imagem de fundo.

parte 4Compreender o código HTML

Aprenda a usar as tags HTML e CSS. As tags HTML incluem abertura e fechamento. A etiqueta É o tag do corpo da página de abertura e É a marca de fechamento. Em HTML, todas as tags de abertura deve ter uma tag de fechamento correspondente para a página é exibida corretamente.

Saiba o que significa que a tag DOCTYPE. Todas as páginas HTML bem escrito deve começar . Isto é o que informa ao navegador o arquivo HTML é um arquivo HTML.

Aprenda a usar a tag título. A etiqueta Ele aparece na barra de título da janela do navegador e também é exibido nas abas do navegador.

Aprenda a usar a tag de estilo. A etiqueta

Saiba como usar a tag do corpo. Todo o texto que aparece escrito entre as tags aparecerá como escrito, salvo em HTML ou CSS código.

parte 5Entender o código CSS

Saiba como usar o código CSS. No arquivo index.html, todo o código CSS encontrada entre as tags

Considere o seguinte código CSS.

corpo {background-image: url("imagendefondo.jpg")-}

Aprenda a identificar partes do código CSS. folhas de estilo CSS são compostos de duas partes: um seletor e uma declaração.

No exemplo, É o selector e background-image: url ("imagendefondo.jpg") é a declaração.

Seletores pode ser tags HTML.

As declarações são sempre chaves ({}).

CSS inclui declarações. declarações CSS, por sua vez, são divididos em duas partes: uma propriedade e um valor. No exemplo acima, o que está dentro entre as teclas, background-image É a propriedade e url ("imagendefondo.jpg") é o valor.

A propriedade é responsável por especificar qual objeto irá dar o formato de valor e descreve como a propriedade de estilo se aplica.

A propriedade eo valor são sempre separados por dois pontos (:).

declarações CSS sempre terminam com um ponto e vírgula (-).