Se vocês são projetando um site, você pode estar interessado em aprender como criar uma imagem de plano de fundo fixa ou marca d'água em uma página da web. Este é um tratamento de design comum que é popular online há algum tempo. É um efeito útil para se ter em seu saco de truques de web design.
Se você não fez isso antes ou tentou antes sem sorte, o processo pode parecer intimidante, mas na verdade não é muito difícil. Com este breve tutorial, você obterá as informações necessárias para aprender a técnica em questão de minutos usando CSS.
Começando
Imagens de fundo ou marcas d'água (que na verdade são apenas imagens de fundo muito claras) têm uma história no design impresso. Os documentos há muito incluem marcas d'água para evitar que sejam copiados. Além disso, muitos folhetos e brochuras usam imagens de fundo grandes como parte do design da peça impressa. O design da Web há muito que emprestou estilos de impressão e imagens de fundo são um desses estilos emprestados.
Essas grandes imagens de fundo são fáceis de criar usando os três seguintes Estilo CSS propriedades:
- imagem de fundo
- fundo de repetição
- anexo de fundo
- tamanho do fundo
Imagem de fundo
Você usará background-image para definir a imagem que será usada como sua marca d'água. Este estilo simplesmente usa um caminho de arquivo para carregar uma imagem que você tem em seu site, provavelmente em um diretório chamado imagens.
imagem de fundo: url (/images/page-background.jpg);
É importante que a própria imagem seja mais clara ou mais transparente do que uma imagem normal. Isso criará aquele "marca d'água"aparência em que uma imagem semitransparente fica atrás do texto, gráficos e outros elementos principais da página da web. Sem essa etapa, a imagem de plano de fundo competirá com as informações em sua página e dificultará a leitura.
Você pode ajustar a imagem de fundo em qualquer programa de edição, como Adobe Photoshop.
Fundo de repetição
A propriedade background-repeat vem a seguir. Se você quiser que sua imagem seja um gráfico grande no estilo de marca d'água, use esta propriedade para fazer com que a imagem seja exibida apenas uma vez.
repetição de fundo: sem repetição;
Sem o não repetir, o padrão é que a imagem se repita continuamente na página. Isso é indesejável na maioria dos designs modernos de páginas da web, portanto, esse estilo deve ser considerado essencial em seu CSS.
Background-Attachment
O anexo de plano de fundo é uma propriedade da qual muitos web designers se esquecem. Usá-lo mantém sua imagem de fundo fixa no lugar quando você usa o fixo propriedade. É o que transforma aquela imagem em marca d'água que fica fixada na página.
O valor padrão desta propriedade é rolagem. Se você não especificar um valor de anexo de plano de fundo, o plano de fundo rolará junto com o resto da página.
anexo de fundo: fixo;
Tamanho do fundo
Background-size é uma propriedade CSS mais recente. Ele permite que você defina o tamanho de um plano de fundo com base na janela de visualização em que está sendo visualizado. Isso é muito útil para sites responsivos que será exibido em tamanhos diferentes em dispositivos diferentes.
tamanho do fundo: capa;
Dois valores úteis que você pode usar para esta propriedade incluem:
- Cobrir - Dimensiona o plano de fundo de forma que toda a largura ou altura total seja exibida. Isso significa que algumas partes da imagem podem não aparecer na tela, mas toda a área será coberta.
- Conter - Dimensiona a imagem para que toda a largura e altura sejam mostradas na área que está sendo estilizada. A imagem não é cortada, mas a desvantagem é que partes da área podem não ser cobertas pela imagem.
Adicionando o CSS à sua página
Depois de entender as propriedades acima e seus valores, você pode adicionar esses estilos ao seu site.
Adicione o seguinte ao HEAD de sua página da web se você estiver criando um site de uma única página. Adicione-o aos estilos CSS de uma folha de estilo externa se estiver criando um site de várias páginas e quiser aproveitar as vantagens de uma folha externa.
Altere o URL da imagem de plano de fundo para corresponder ao nome do arquivo específico e ao caminho do arquivo que seja relevante para o seu site. Faça todas as outras alterações apropriadas para se adequar ao seu design também e você terá uma marca d'água.
Você também pode especificar a posição
Se quiser colocar a marca d'água em um local específico em sua página da web, você também pode fazer isso. Por exemplo, você pode querer a marca d'água no meio da página ou talvez no canto inferior, ao contrário do canto superior, que é o padrão.
Para fazer isso, adicione a propriedade background-position ao seu estilo. Isso colocará a imagem no local exato em que você gostaria que ela aparecesse. Você pode usar valores de pixel, porcentagens ou alinhamentos para obter esse efeito de posicionamento.
posição de fundo: centro;