Como fazer um fundo de imagem em HTML e CSS. 3 maneiras simples

Define a cor do plano de fundo da paleta. A cor do herdeiro sempre coincide com a cor do elemento ancestral.
Saudações. Neste artigo, quero contar sobre três maneiras de colocar uma imagem como pano de fundo de toda a página usando apenas HTML + CSS (sem usar JS).

Saudações. Neste artigo, quero contar sobre três maneiras de colocar uma imagem como pano de fundo de toda a página usando apenas HTML + CSS (sem usar JS).

Então, os requisitos para a imagem de fundo Somos os seguintes:

  • 100% de largura e páginas altura coberta
  • As escalas de fundo se necessário (o fundo é esticado ou comprimido dependendo do tamanho da tela)
  • Cole as proporções das imagens (proporção)
  • Imagem centrada na página
  • O fundo não causa pergaminhos
  • A solução é maximamente cruzada
  • Nenhuma outra tecnologia é usada, exceto CSS

Define a cor do plano de fundo da paleta. A cor do herdeiro sempre coincide com a cor do elemento ancestral.

Método 1

Na minha opinião, esta é a melhor maneira, porque é a mais fácil, concisa e moderna. Ele usa a propriedade CSS3 Tamanho de fundo. que nos aplicamos à tag Html. . Exatamente Html. , mas não Corpo. Porque Sua altura é maior ou igual à altura da janela do navegador.

Instale um fundo fixo e centralizado, depois ajuste seu tamanho usando Fundo de tamanho: capa .

Html { 

Background-Image: URL (imagens / background.jpg);

Fundo-Repetir: Não repetir;

Posição de antecedentes: centro central;

Anexo de fundo: fixo;

-Webkit-background-size: capa;

-Moz-background-size: capa;

-O-background-size: capa;

Fundo de tamanho: capa; 
} 

Demonstração

Este método funciona em

  • Chrome (qualquer versão)
  • Opera 10+.

Firefox 3.6+

Safari 3+.

Ie 9+

Para que as imagens carreguem rapidamente, coloque seus sites apenas de provedores de hospedagem comprovados, por exemplo, Beget.com 
Os usuários e os mecanismos de busca amam sites rápidos. 

Background-Image: URL (imagens / background.jpg);

Método 2.

Esse método fornece o uso do elemento IMG, cujo tamanho variará dependendo do tamanho da janela do navegador. Para esticar a imagem para a tela cheia, ele precisa definir a altura mínima e a largura com um valor de 100%. E para que a imagem não seja compactada ao tamanho menor do que o original, instale a largura mínima com o valor da igual largura da imagem.

Se a largura da janela for menor que a largura da imagem, a consulta de mídia será usada para alinhar o plano de fundo no centro.

herdar.

<img src = "/ images / background.jpg" Class = "Background" />

img.background { Min-altura: 100%; Largura mínima: 640px; Largura: 100%; Altura: Auto;

Posição: fixo; Top: 0; Esquerda: 0;

/ * Depende do tamanho da imagem * /

@Media tela e (largura máxima: 640px) { img.bg { и Esquerda: 50%; margem esquerda: -320px; } } } Demonstração

Herda todas as características do elemento pai

Este método funciona em:

Quaisquer versões de bons navegadores (Chrome, Opera, Firefox, Safari) Ie 9+ и Método 3. . Outra maneira é a seguinte: Corrigir a imagem <img /> para o canto superior esquerdo da página e estique-a usando as propriedades de largura mínima e mínima de 100%, mantendo a proporção de aspecto. Verdadeira, com essa abordagem, a imagem não está centrada. Mas esse problema é resolvido envolvido a imagem em <div />, que fazemos 2 vezes o tamanho da janela. E a própria imagem nos estendemos e colocamos no centro. <div classe = "background"> <img src = "/ images / background.jpg" />

</ div> Div.background { <div classe = "background"> Posição: fixo;

Top: -50%;

Esquerda: -50%; } Largura: 200%; Altura: 200%; }

img { Posição: Absoluto; Top: 0;

Esquerda: 0; Direita: 0; :

Fundo: 0;

Margem: Auto; Largura mínima: 50%; Altura mínima: 50%; } .

Este método funciona em bons navegadores e ou seja, 8+.

Espero que esta informação seja útil para você. Pessoalmente, muitas vezes uso esses métodos, especialmente primeiro. Certamente há outras maneiras de colocar uma imagem no fundo traseiro com CSS. Se você sabe sobre eles, compartilhe, por favor comentários. Definir cor de fundo e / ou uma imagem para uma página ou um item separado é simples o suficiente. O principal é saber onde e como isso pode ser feito, bem como ter um código de cor e / ou uma imagem de fundo. É possível que, a partir deste artigo, você aprenderá muitas coisas novas, mas criei especificamente para iniciantes. Portanto, tudo será o mais curto possível e em detalhes simultaneamente. O principal é que você receberá não apenas a apresentação geral e exemplos prontos, mas também entender como fazer um pano de fundo em HTML. Para definir o plano de fundo em HTML Use o DocType Intermediário E vou começar com o fato de que Html5. Não há possibilidade de definir o plano de fundo para o site. Este recurso foi decidido suportar no CSS. Portanto, se você planeja usar abaixo, e quiser obter um válido » (correto) Código, você precisa ficar no tipo de transição do documento. Para fazer isso, sua página da Web deve começar com a seguinte linha: <! DOCTYPE HTML Public "- // W3C // DTD HTML 4.01 » Transitório // pt "" http://www.w3.org/tr/html4/loose.dtd ">

Tempo para aulas práticas

Como o fundo está em uma página da web? (#)Se você descobrisse, vamos entender como o fundo é criado. E a primeira coisa aqui deve ser notada - esta é a diferença entre

Cor de fundo

Imagem de fundo

. No começo vai

Cor de fundo Esquerda: 50%; que inunda todo o espaço da página disponível ou seu elemento. O repetido em cima dele imagem de fundo }

. Visualmente, isso pode ser representado da seguinte forma: Posição: Absoluto; Top: 0;

Fundo do documento HTML e seus elementos

Depois de decepcionar os principais elementos do controle de cenário, bem como seus atributos, prossiga diretamente para a análise de um exemplo específico. No código do programa mostrado abaixo, tentei habilitar todos os elementos descritos.

A segunda coisa que você precisa saber é a diferença entre

Corpo do documento Direita: 0; :

elemento do documento

Corpo do documento

indicado no código HTML da etiqueta da página da web

Corpo. que inclui todo o conteúdo da página da web. Obviamente, o fundo do documento do documento não pode ser transparente. Se o plano de fundo do corpo do documento não for especificado, o valor padrão especificado nas configurações do navegador será usado. Elementos de página estão dentro da tag }

. É digno de nota que você pode definir a imagem de cor e / ou fundo usando HTML para todos os elementos do documento. Por exemplo, a imagem de fundo pode ser especificada apenas para tabelas. Por padrão, eles geralmente têm um fundo transparente. Posição: Absoluto; Top: 0;

Atributo BGCOLOR para criar cor de fundo

Para perguntar

O documento ou seus elementos são atributo Altura: 200%; и imagem de fundo bgcolor. , por exemplo: <BODY BGCOLOR = "# EC008C">

<! - Body Document ->

</ Corpo>

Neste caso, definimos a cor de fundo para a página como um todo. Mas um exemplo de como definir a cor de fundo para a tabela, na tag Mesa <Table bgcolor = "# ec008c"> <tr> <td> texto com fundo </ td> </ tr> </ table>

É digno de nota que a cor de fundo na tabela também pode ser especificada para linhas na tag

Tr. E para suas células na tag Td.

Como descobrir o código de cor? Você provavelmente já percebeu que a cor no HTML é definida para código Html. , por exemplo:

# EC008C.

  • . Para descobrir o código que você precisa da cor, você pode usar um dos editores gráficos. Por exemplo, no Photoshop você pode usar "
  • Ferramenta de conta-gotas.
  • (Pipeta)

Para obter uma cor de um ponto na foto. Então, você precisa clicar na cor resultante na barra de ferramentas e na janela que abre "

Coletor de cores. (Seleção de cor) Copie o código de cor. Eu chamo sua atenção para o fato de que este código será sem sinal de treliça No começo, este sinal precisará ser adicionado manualmente.

Você também pode usar numerosos serviços online, por exemplo: 
Seu princípio do trabalho é ainda mais fácil - clique na cor desejada e obtenha o código. Fundo de atributo para criar uma imagem de fundo Bem como no caso de cor de fundo e no caso de
Você precisa usar um atributo especial, ou seja, 
fundo. 
<background background = "/ 2014/06 / bg.jpg">

В Html. Neste caso, pedimos a imagem de fundo para a página como um todo. Vale ressaltar que, devido às limitações do tamanho da imagem, será repetida, por exemplo: Como você vê, quando a repetição, a transição entre as fotos é perceptível. Portanto, as imagens especiais são frequentemente usadas, onde este momento é levado em conta. Mas um exemplo de como definir uma foto de fundo para uma tabela, na tag

<table background = "/ 2014/06 / bg.jpg"> <tr> <td> texto com fundo </ td> </ tr> </ table> Html. Vale ressaltar que a imagem de fundo pode ser definida apenas para a tabela como um todo e / ou sua célula separada. Para uma string, não funcionará. Fundo de atributo para criar uma imagem de fundo .

Caminho absoluto e relativo para a imagem de fundo (Seleção de cor) Vale separadamente a prestação de atenção Endereço de fundo Imagem. . Neste caso, o caminho relativo para a imagem é usado, isto é. O endereço é indicado no local do arquivo de imagem para o arquivo da página da Web. Esta opção não pode ser chamada particularmente bem-sucedida. É melhor usar o caminho absoluto para a foto, isto é.

seu URL completo. <background background = "/ images / bg.jpg"> .

Neste caso, você não terá problemas concomitantes. Para mais sobre isso, você pode ler aqui.

Vamos resumir 
Usando atributos moralmente desatualizado, porque para a validade do código HTML, você terá que usar o transitório DOCTYPE.

. Para definir a cor de fundo no HTML, usa códigos especiais que você pode descobrir em um editor gráfico ou usando serviços online especiais. A imagem de fundo é duplicada nas caudas da área alocada e está no topo da cor de fundo. Para especificar uma imagem de fundo, é melhor usar seu URL completo. Eu tenho tudo sobre isso. Obrigado pela atenção. Boa sorte!

Link curto: http://goo.gl/03tsnz Como fazer uma experiência para o site? Qualquer sala vai parecer muito melhor se o chão se levantar caro tapete persa. Então, o pior do seu site? Talvez seja hora e o chão dele " definir
  • »Palácio artesanal elegante caro. Nós vamos entender mais sobre como fazer uma experiência para o site:
  • Acontece que o antigo design do site já veio. E eu quero algo novo e saboroso. E o novo design será tal se você cozinhar com suas próprias mãos.
  • Mas para mudar completamente todo o design do recurso - a coisa é ingrata. Sim, e nem todo mundo tem uma coisa sobre isso. "
  • afiada

" mãos. Portanto, é mais fácil refrescar o modelo antigo, mudando a cor do fundo do recurso ou sua imagem de fundo.

Existem várias maneiras de alterar o plano de fundo no site. Isso usa oportunidades. 
CSS. ou . Mas muitas das propriedades para trabalhar com o fundo têm o mesmo nome e metodologia de aplicação nessas tecnologias da Web.
  • Como pano de fundo, você pode usar vários itens: Cor; ;
  • Imagem de fundo;
  • Imagem textural. Vamos lidar com o uso de cada um deles com mais detalhes. Para definir a cor do fundo traseiro para o site, a propriedade é usada.

cor de fundo.

Atributo estilo. 

Estilo. . Ou seja, para definir a cor básica para a página da Web, você precisa registrá-lo dentro da tag <body>. Por exemplo: <Estilo corpo = "fundo-cor: # 55d52b"> <p> fundo do site # 55d52b </ p> </ body>

Além do código de cores hexadecimal, o valor é suportado no formato de palavra-chave ou

RGB. 

. Exemplos:

<Estilo do corpo = "fundo-cor: RGB (51,255,153)"> <p> Fundo do site RGB (23,113,44) </ p> </ body> <Estilo do corpo = "fundo-cor: verde"> <p> fundo do site verde </ p> </ body> Definir a cor de fundo usando palavras-chave tem uma série de restrições em comparação com as duas maneiras restantes.

Total 16 palavras-chave são suportadas para definir cor. Aqui estão alguns deles:

Branco, vermelho, azul, preto, amarelo outro. Portanto, a fim de definir o plano de fundo para o site

é melhor usar o formato hexadecimal ou 

Além de selecionar cor, outras configurações estão disponíveis. Se propriedade. Conjunto de valor Transparente

O fundo da página ficará transparente. Este valor é atribuído a esta propriedade por padrão. Agora considere a possibilidade de uma linguagem de hipertexto para instalar o padrão de fundo para o site. É possível fazer isso usando a propriedade. imagem de fundo.

Exemplo: 

<Estilo do corpo = "fundo-imagem: URL (img_1809.jpg)"> </ body>

Como pode ser visto no código, a ligação de imagem ocorre através do caminho

URL.

Postado entre parênteses. Mas nem todas as fotos acabam sendo tão grandes para preencher a área inteira da tela com seus tamanhos. Vamos ver como a figura menor será exibida.

Suponha que estamos desenvolvendo um site sobre poesia e, como substrato, você precisa usar a imagem de Pegasus. O cavalo alado persistirá a liberdade de pensamento criativo do poeta!

Precisamos que a imagem seja exibida no meio da tela uma vez. Mas, infelizmente, o navegador não entende nossos desejos sublimes. E exibe uma imagem menor para o fundo do site quantas vezes a área de tela pode acomodar:

Provavelmente quatro cavalos sorridentes com asas de poetas serão demais para inspiração. Portanto, proibir a clonagem do nosso Pegasus. Faça isso usando a propriedade

fundo de repetição. . Valores possíveis: Repetição-x - repetição da imagem de fundo horizontalmente;

Então, facilitamos a tarefa de definir o fundo de volta de duas fotos: animação e imagem regular. Nesse caso, a animação GIF será corrigida e o desenho é rolado junto com o conteúdo da página.

Repetição-y - verticalmente;

Repita - nos dois eixos;

Não repetição - repetição é proibida.

Entre as opções listadas, estamos interessados ​​no último. Antes de alterar o plano de fundo do site, usá-lo em seu código:

<Estilo de corpo = "Background-Image: URL (3.JPG); Background-Repetir: Não repetir"> </ corpo>

Mas, claro, é melhor se nosso Letrow estiver localizado no meio da tela. Propriedade

Posição de antecedentes Só é destinado a posicionar o padrão de fundo na página. Defina as coordenadas de local de várias maneiras:
. Ou seja, para definir a cor básica para a página da Web, você precisa registrá-lo dentro da tag <body>. Por exemplo: Palavra-chave (
<background background = "/ images / bg.jpg"> Top, inferior, centro, esquerda, direita)
ou Porcentagens - a contagem regressiva começa no canto superior esquerdo;
Qualquer sala vai parecer muito melhor se o chão se levantar caro tapete persa. Então, o pior do seu site? Talvez seja hora e o chão dele " Em unidades de medida (
(Seleção de cor) Píxeis
). Usamos a opção mais fácil de centrar:

<Estilo do corpo = "Background-Image: URL (3.JPG); Background-Repetir: No-Repetir; Background-Position: Top Center"> </ body>

Acontece que você precisa consertar a posição do desenho ao rolar. Portanto, antes de fazer uma foto do site, use uma propriedade especial.

Anexo de fundo.

. Valores válidos: <ul> rolo <li> </ li> <li> corrigido. </ Li> </ ul>

Precisamos do último significado. Agora o código do nosso exemplo será assim: [/ html] 
<estilo do corpo = "Background-Image: URL (3.JPG); Background-Repetir: sem repetição; Posição de fundo: Centro de topo; Anexo de fundo: Corrigido"> </ corpo> 

No primeiro exemplo, para o fundo, usamos uma grande e bela paisagem do deserto. Mas para tal beleza você tem que pagar cheio. O peso da imagem realizada em alta qualidade pode atingir vários megabytes.

Este volume não afeta a velocidade de download da página do navegador com conexão de alta velocidade com a Internet. Mas e a internet móvel, ao usar qual download de vários "

metros

"Vai levar muito tempo?

"Vai levar muito tempo? Todos esses problemas são resolvidos usando um fundo de textura. Ele usa uma pequena imagem como um padrão de textura. Mesmo sob a condição de sua múltipla repetição, o padrão é carregado apenas uma vez.

Para criar um fundo escuro para o site ir para Corpo. Photoshop. Corpo. Crie uma imagem na forma de uma faixa de um longo de 1200 pixels e uma largura de 15 pixels. Em seguida, usamos um simples gradiente preto e branco e conectos a textura resultante para a página do site:

<Estilo do corpo = "fundo-imagem: URL (1.png); cor: RGB (0,51,204)"> </ body>

Para clareza, adicionamos texto e definimos a cor usando a propriedade. Corpo. Cor Corpo. . Foi o que aconteceu:

  • Altura: 200%; Todas as propriedades descritas acima também são aplicáveis ​​para folhas de estilo em cascata. Crie um fundo do site
  • imagem de fundo CSS.
  • Ao reescrever o código de um dos nossos exemplos anteriores: <Head> <title> documento sem título </ title> <estilo tipo = "texto / css"> Body {Background-Image: URL (3.JPG); Background-Repetir: Não repetir; Background-Position: Top Center; Anexo de fundo: fixo;} </ style> </ head> <body> </ body>
  • O resultado será semelhante. Bem, nós olhamos para todas as opções, como mudar o fundo no site. Agora permanece apenas criar um desenho do tapete futuro e espalhá-lo nas páginas do seu recurso. Mas esta é a sua mão.
  • Bom dia para todos para aprender e aprender algo novo! Você já prestou atenção ao aparecimento de sites ao desenvolver os criadores ter sido preguiçoso para organizar o plano de fundo das páginas? E eu me virei. Parece abater. Muitas vezes, devido à falta de separações usuais entre diferentes tipos de informações, é misturado e simplesmente desaparece o desejo de olhar ainda mais um recurso web. Para que tal dificuldade tenha acontecido com o seu projeto, decidi escrever um artigo sobre o tópico: "Como fazer um pano de fundo de páginas em HTML." Depois de ler a publicação, você aprenderá, com quais ferramentas você pode definir o design de fundo, como fazer um fundo fixo ou alterando e muito mais, o que ajudará a tornar seu site atraente. Agora vamos começar!
  • Ferramentas básicas para definir as páginas da Web de fundo Para definir a imagem de fundo, os desenvolvedores de idiomas forneceram um fundo de atributo. Está disponível em HTML e CSS.
  • Na linguagem de marcação, este é um atributo da tag do corpo e nas tabelas de estilo - uma propriedade universal que permite estabelecer até 5 as características do plano traseiro ao mesmo tempo. O fundo é um elemento bastante flexível que pode ser usado para a tarefa de fundo como uma imagem de cor, cor ou até mesmo animação. Então, para instalar a imagem de fundo através da unidade HTML <BODY> é suficiente para escrever esse código:
  • <Background background = "Endereço de arquivo"> ​​... </ corpo> E em vez das palavras "endereço do arquivo" inserir o caminho para a imagem.
  • No entanto, observe! Se na forma do fundo você deseja ver uma tela Monochon especificada na paleta de cores, isso é feito usando o atributo BGCOLOR. Por exemplo, <Body bgcolor = "# 000000"> ... </ corpo>, pedimos a um fundo preto para o nosso site.
  • As cores no CSS e HTML são definidas por uma palavra em inglês (por exemplo, vermelho) ou um código especial que consiste em um sinal # e seis caracteres após (por exemplo, # ffdab9). Ao digitar uma segunda opção em produtos de software especializados para desenvolvedores, a paleta aparecerá automaticamente à sua frente. Se você acabou de começar a aprender esses idiomas da Web, o código de cor pode ser engateado na Internet.

Fundo como propriedade em mesas de estilo em cascata Altura: 200%; :

Ele é definido ou em um arquivo separado com estilos CSS, ou no elemento <estilo>. Com esta propriedade, você pode instalar padrões de fundo ou cor, especificar o local inicial na página, definir imagens recorrentes e fixas. Para maior clareza, fiz definições na tabela. 

Parâmetros. Objetivo

Usado para instalar uma imagem fixa ou rolada junto com o conteúdo do site. Acontece corrigido, rolar e herdar

Define a imagem de fundo. Pode ser indicado simultaneamente com a cor. Em seguida, o último será exibido até que a imagem esteja completamente carregada.

Define o local inicial do objeto para o parâmetro anterior. Horizontalmente indica direita, esquerda e central e verticalmente - inferior, superior e central. Além disso, você pode herdar a posição (herda), definida em porcentagem, pixels e outras dimensões 

Aplique ao usar o atributo de antecedentes. Regula como a imagem será repetida. Você pode especificar 2 valores: para horizontal e vertical. Há características: não repetir, repetir, repetir x, repetir-y, herdar, espaço

Добавить комментарий