Como Colocar Imagem de Fundo no seu Site ou Blog

Para você que não está satisfeito com a aparência do seu site ou blog, que tal colocar uma imagem de fundo? Neste tutorial vou ensinar todo o passo a passo. Assim você vai poder dar uma melhorada na apareência do seu website.

Imagens de fundo, assim como o nome indica, são parte do plano de fundo de um site, não fazem parte do conteúdo real. O lugar mais comum para adicionar uma imagem de fundo é a tela inteira, ou seja, a tag body do HTML.

O código CSS para adicionar uma imagem

body { background: url(/bgimagem.jpg); }

Eu estou usando apenas uma imagem aleatória para fins de demonstração. E podemos notar o seguinte:

É uma flor muito bonita que se  repete e cobre o fundo inteiro – que é chamado de "tiling" (pense no azulejo do banheiro) torna praticamente impossível ler o conteúdo real da página

Há também imagens de fundo especiais que alinham-se lado a lado de forma  imperceptível - por exemplo: imagem de fundo

CSS também nos dá as ferramentas para direcionar nossa imagem de fundo como queremos. O padrão, como você pode ver, é que ela se  repete horizontalmente e verticalmente para preencher todo o plano de fundo, independentemente do tamanho. Às vezes nós podemos desejar que a a imagem apareça apenas horizontalmente ou verticalmente - e talvez não diretamente na borda da área de exibição.

body { background: fundo de repeat-x url(/bgimage.jpg); }

Cria um plano de fundo que é repetido verticalmente na parte inferior do conteúdo, e esta imagem de plano de fundo repetida horizontalmente sobre o lado direito é criada por este CSS:

body { background: url(/bgimage.jpg) repeat-y right; }

Há muitas maneiras de nós controlarmos o nosso plano de fundo. Além dos já mencionados  acima, nós poderíamos:

Adicionar uma cor de fundo (background: url(/image.jpg) # 555555;),  exibir a imagem apenas uma vez (no-repeat),  posicioná-la mais especificamente (opções são: superior, inferior, esquerda, direita, Centro, 15px x ou y-20% (medições e unidades são opcionais)), impedí-la de se repetir  (plano de fundo: url(/image.jpg) fixed;) ou qualquer combinação de qualquer um dos acima

Uma sábia combinação de todas essas técnicas pode realmente  criar um plano de fundo decorativo que não interfira com o conteúdo real. Assim. O CSS seguinte criado esta página – e por favor, note que eu também adicionei alguns padding para manter o conteúdo fora da imagem, o que torna muito mais fácil de ler as coisas.

body { background: url(/bgimage.jpg) no-repeat #f6f1b9 fixed upper right; padding-right: 250px; }

Imagens de fundo podem ser adicionadas a praticamente qualquer marcador. Elas podem ser adicionadas às divisões, usadas para criar menus de navegação, enfeitar uma lista, decorar tags e muito mais!!!!


Autor : Marcelo

Meu objetivo é ajudar você a encontrar o melhor construtor de site online que se encaixe perfeitamente nas necessidades do seu projeto, seja ele um blog pessoal, uma loja virtual ou criar site grátis para sua empresa.

Relacionados

3 Comentários

Comentar
30 Maio 2016 05.42

Adorei! Obrigada pela informação.

Responder
avatar
10 Julho 2016 06.26

Concordo com você, Renata. Esse é sensacional!

Responder
avatar
20 Agosto 2015 05.46

Parabéns pelo site, amigo. Consegui criar meu site usando o construtor que você indicou.

Responder
avatar