Qualquer sala ficará muito melhor se for coberta com um tapete persa caro. Então, qual é o pior do seu site? Talvez tenha chegado a hora de "cobrir" o chão com um caro palácio artesanal elegante. Examinaremos mais detalhadamente como criar um plano de fundo para o site:
Seleção de imagem
Gostaria de começar escolhendo uma imagem. Para tornar o plano de fundo mais bonito e uniforme na página, você não precisa se preocupar com as dimensões e o alinhamento. Sugiro imediatamente procurar textura perfeita. O que é isso
Infelizmente, não é possível esticar uma imagem em html para tela cheia. A foto é usada em tamanho real. Se a imagem for pequena, ela pavimentará toda a área, como na imagem abaixo. Para esticar a imagem, você precisa criar um documento css adicional, sem isso não funcionará.
Embora você tenha a oportunidade de contornar o sistema. Para fazer isso, use o Photoshop e redimensione a imagem para a largura da tela (1280x720). Embora, neste caso, ao rolar para baixo, a imagem substitua outra.
Uma opção muito melhor se você não quiser usar o CSS seria usar texturas sem costura. Eles não veem juntas. Eles são como papel de parede ou azulejos modernos no design. Um substitui o outro e nenhuma articulação é visível.
Se você estiver interessado em imagens gratuitas e na falta de consequências legais para o uso delas, recomendo pesquisar no site Pixabay.com.
Agora vamos trabalhar com o código. Devo dizer imediatamente que estamos trabalhando com html agora, ou seja, estamos alterando a imagem não para todo o site, mas apenas para uma página específica para a qual o código está sendo gravado. Se você estiver interessado em alterações em todo o recurso, precisará criar código usando css, mas mais sobre isso mais tarde.
Para que você possa trabalhar no bloco de notas, eu prefiro o NotePad ++. É muito mais conveniente trabalhar nele: o código é adicionado para você, as tags são realçadas. O programa é gratuito e pesa cerca de 3 MB. Altamente recomendável, especialmente se você é iniciante.
Então, na tag corpo você precisa adicionar um atributo plano de fundo e especifique um link para a imagem, de onde a foto será tirada. Veja como fica no programa.
Você pode simplesmente abrir o bloco de notas e copiar esse código. Entre aspas, coloque um link para a imagem que você gosta.
Imagem como plano de fundo da página - HTML
Primeiro, considere o método de definir a imagem de plano de fundo no site usando o atributo plano de fundo tag corpo:
Como no exemplo acima, além da figura, é recomendável indicar a cor do plano de fundo (ela será exibida no site quando a página carregar), que será combinada com a imagem de plano de fundo e criará um contraste com o texto no site. Por exemplo, se você usar a cor branca do texto no site, deverá especificar uma cor de fundo escura e definir uma imagem de fundo escura. Nesse caso, o texto será fácil de ler.
Nota: É recomendável que você defina a imagem e a cor do plano de fundo não usando HTML, mas usando CSS. Nesse caso, o código será válido e mais correto.
Imagem como plano de fundo da página - CSS
Em CSS, a cor e a imagem de fundo podem ser definidas com uma propriedade. plano de fundo:
Aqui usando a propriedade anexo de fundo o plano de fundo da página é fixo e o uso da propriedade repetição em segundo plano a repetição horizontal da imagem está definida. Mas vale a pena considerar que a imagem de fundo deve "costurar" ao longo das bordas também.
Se você deseja esticar a imagem de plano de fundo para o tamanho total da janela do navegador, use a propriedade tamanho do plano de fundo: 100%,
No construtor de sites Nubex, em qualquer site, você pode usar uma imagem grande como plano de fundo e corrigi-la.
Antecedentes do site
Acontece que o design do site antigo já é chato. E eu quero algo novo e saboroso. E o novo design será tal se você mesmo cozinhar.
Mas mudar completamente todo o design do recurso é uma coisa ingrata. E nem todo mundo está com as mãos afiadas nesse negócio. Portanto, é mais fácil atualizar o modelo antigo alterando a cor do plano de fundo do recurso ou sua imagem de plano de fundo.
Existem várias maneiras de alterar o plano de fundo no site. Para fazer isso, use os recursos de CSS ou html. Mas muitas das propriedades para trabalhar com o plano de fundo têm o mesmo nome e metodologia de aplicativo nessas tecnologias da web.
Noções básicas de plano de fundo em HTML
Você pode usar vários elementos como pano de fundo:
- Cor
- Imagem de fundo
- Imagem de textura.
Trataremos de cada um deles com mais detalhes.
Para definir a cor de fundo do site, é usada a propriedade cor de fundo do atributo style style. Ou seja, para definir a cor principal de uma página da web, é necessário registrá-la dentro da tag. Por exemplo:
O HTML suporta apenas 16 palavras-chave para cores. Aqui estão alguns deles: branco, vermelho, azul, preto, amarelo e outros.
Portanto, para definir o plano de fundo para o site html, é melhor usar o formato hexadecimal ou RGB.
Além da seleção de cores, outras configurações também estão disponíveis. Se a propriedade cor de fundo estiver definida como transparente, o fundo da página ficará transparente. Este valor é atribuído a esta propriedade por padrão.
Agora considere as possibilidades da linguagem de hipertexto para definir o papel de parede do site. Isso pode ser feito usando a propriedade background-image.
Suponha que estamos desenvolvendo um site sobre poesia e precisamos usar uma imagem do Pegasus como substrato. O cavalo alado personificará a liberdade do pensamento criativo do poeta!
- repeat-x - repita a imagem de fundo horizontalmente,
- repita y - verticalmente
- repita - em ambos os eixos,
- sem repetição - a repetição é proibida.
Entre essas opções, estamos interessados nesta última. Antes de alterar o plano de fundo do site, usamos em nosso código:
- Palavra-chave (superior, inferior, central, esquerda, direita),
- Porcentagem - a contagem regressiva começa no canto superior esquerdo,
- Em unidades de medida (pixels).
Usamos a opção de centralização mais simples:
Acontece que você precisa fixar a posição da imagem ao rolar. Portanto, antes de fazer uma imagem o plano de fundo do site, use a propriedade especial de anexo de plano de fundo. Os valores que ele aceita são:
- rolar
- fixo.
Nós precisamos do último valor. Agora, o código do nosso exemplo ficará assim: [/ HTML]
Plano de fundo do site textural
No primeiro exemplo, em segundo plano, usamos uma paisagem grande e bonita do deserto. Mas por tanta beleza você tem que pagar na totalidade. O peso de uma imagem feita em alta qualidade pode atingir vários megabytes.
Esse valor não afeta a velocidade de carregamento da página do navegador com uma conexão de Internet de alta velocidade. Mas e a Internet móvel, usando quais downloads de alguns "medidores" levarão muito tempo?
Todos esses problemas são resolvidos usando um fundo de textura. Ele usa uma imagem pequena como padrão de textura. Mesmo que seja repetido várias vezes, o desenho é carregado apenas uma vez.
Para criar um plano de fundo escuro para o site, vá para o Photoshop, crie uma imagem na forma de uma faixa de 1200 pixels de comprimento e 15 pixels de largura. Em seguida, aplique um gradiente preto e branco simples e conecte a textura resultante à página do site:
Para maior clareza, adicionamos texto e definimos sua cor usando a propriedade color. Aqui está o que aconteceu:
Ferramentas CSS
Todas as propriedades descritas acima também são aplicáveis a folhas de estilos em cascata. Crie o plano de fundo do site css reescrevendo o código para um de nossos exemplos anteriores:
O resultado será semelhante.
Bem, aqui examinamos todas as opções de como alterar o plano de fundo no site. Agora resta apenas criar um desenho do tapete do futuro e espalhá-lo nas páginas do seu recurso. Mas isso já depende de você.
