Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Imagens de fundo CSS [background-image]

imagens

A propriedade CSS background-image é usada para definir  imagens de fundo. Para inserir uma imagem de fundo na página basta aplicar a propriedade background-image ao elemento <body> e especificar o caminho para onde está gravada a imagem.

Não se esqueça que para trabalhar com os códigos você precisa salvar os aquivos em index.html e estilo.css dentro da pasta apropriada do seu servidor local , conforme postagem anterior. Apenas assim você conseguirá abri o seu código HTML sem problemas, e confirmar se você está realmente entendo o que estou ensinando.

body {

background-color: #FFCC66;
background-image: url(“coloque_endereco_da_sua_imagem_aqui.jpg”);
}
h1 {
color: #990000;
background-color: #FC9804;
}

Veja exemplo cima depois de rodar no navegador as imagens repetidas:

imagens

Obs.: Note como foi especificado o caminho para a imagem usando o url(“imagem.gif”). Isto significa que a imagem está localizada no mesmo diretório da folha de estilos. Pode ser escolhido um outro diretório para gravar as imagens  e o caminho seria url(“../imagens/imagem.gif”) ou até mesmo hospedá-la na Internet: url(“http://www.html.net/imagem.gif”).

 

Imagem de fundo repetida [background-repeat]

No exemplo anterior você observou que a imagem se repetiu tanto na vertical como na horizontal cobrindo toda a tela? A propriedade background-repeat controla o comportamento de repetição da imagem de fundo. 

A tabela a seguir mostra os quatro diferentes valores para background-repeat.

  Valor

background-repeat : repeat -x (a imagem se repete na horizontal)

background-repeat : repeat – y (a imagem se repete na vertical)

background-repeat : repeat ( a imagem se repete tanto na horizonta como na vertical)

background-repeat : no-repeat ( a imagem não se repete)

 

Por exemplo, o código mostrado a seguir é para que a imagem não se repita na tela:

body {
background-color: #FFCC66;
background-image: url(“coloque_endereco_da_sua_imagem_aqui.jpg“);
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}

 

Veja no navegador como fica:

 

nãorepetirimagem

 

 

Imagens de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem será fixa ou se irá rolar juntamente com o elemento que a contém. Uma imagem de fundo fixa permanece no mesmo lugar e não rola com a tela ao contrário da imagem que não é fixa e rola acompanhando o conteúdo da tela. A tabela a seguir mostra os quatro diferentes valores para background-attachment. 

                           Valor

background-attachment : scroll      ( a imagen rola com a página)

background-attachment : fixed       ( a imagem é fixa)

Veja os exemplos para constatar a diferença entre imagem fixa e imagem que rola.

Por exemplo, o código abaixo fixa a imagem na tela.

body {
background-color: #FFCC66;
background-image: url(“coloque_endereço_da_sua_imagem_aqui.jpg“);
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Veja imagem após rodar no navegador:

nãorepetirimagem

 

 

Posição das imagens de fundo [background-position]


Por padrão uma imagem de fundo é posicionada no canto superior esquerdo da tela (como exemplos apresentados acima). A propriedade background-position permite alterar este posicionamento padrão e colocar a imagem em qualquer lugar na tela. Existem várias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores ‘100px 200px’ posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador.

As coordenadas podem ser expressas em percentagem da largura da janeja, eu unidades fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right.

A figura a seguir ilustra o modelo de coordenadas:

Posição layout

 

Na tabela a seguir são mostrados alguns exemplos:

 

background-position :  2cm  2cm (a imagem é posicionada a 2 cm da borda esquerda e a 2 cm da borda de cima da página.)

background-position : 50% 25% ( 50% a imagen é posicionada no centro da horizontal e 25% à um quarto 1/4 da borda de cima da página.) 

background-position : top higth ( a imagem é posicionada no canto superior direito da página)

No exemplo de código a seguir a imagem é posicionada no centro superior da página:

body {
background-color: #FFCC66;
background-image: url(“coloque_endereco_da_sua_imagem_aqui.jpg”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
h1 {
color: #990000;
background-color: #FC9804;
}

 

Veja exemplo do código acima após rodar no navegador:

 

imagen_centro

 

 

Compilando [background]


A propriedade background é uma abreviação para todas as propriedades listadas anteriormente. Com background você declara várias propriedades de modo abreviado, economizando digitação e alguns bites, além de tornar a folha de estilo mais fácil de se ler e entender. A url de suas imagens ficará na segunda linha.

Por exemplo, observe as cinco linhas a seguir:

background-color: #FFCC66;
background-image: url(“butterfly.gif”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

Usando background você consegue o mesmo resultado, abreviando como mostrado abaixo:

background: #FFCC66 url(“imagem.gif”) no-repeat fixed right bottom;

A declaração abreviada deve seguir a seguinte ordem:
background-color
background-image
background-repeat
background-attachment
background-position

Veja como fica o código com a abreviação:

body {
background: #FFCC66 url(“coloque_endereco_da_sua_imagem_aqui.jpg“) no-repeat fixed center top;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Veja imagem após roda no navegador:

imagen_centro

Note que não mudou nada em relação a imagem anterior.

Mas, se uma das propriedades não for declarada ela assume automaticamente o seu valor default. Por exemplo, a propriedade background-attachment e background-position não foram declaradas no código mostrado a seguir:

background: #FFCC66 url(“coloque_endereco_da_sua_imagem_aqui.jpg“) no-repeat;

As duas propriedades não declaradas assumirão o valor default que como você já sabe são: a imagem rola na tela e será posicionada no canto superior esquerdo (que são os valores default para as propriedades não declaradas).

Veja agora como fica:

posição_resumida

 

Note que a imagem mudou para uma posição padrão.

Continue estudando imagens de fundo com css, pois ainda temos muito a aprender.

 

<<<Voltar —

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

  • I just want to mention I am new to weblog and really loved this page. Almost certainly I’m going to bookmark your blog . You definitely come with terrific article content. Thank you for sharing your blog.

    Tradução:
    Eu só quero falar que eu sou novo no blog e realmente amei nesta página. Quase de certeza que vou marcar o seu blog. Você definitivamente vêm com o conteúdo do artigo fantástico. Obrigado por compartilhar o seu blog.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.