A propriedade CSS background

177591 visualizaes (desde 20/04/2015) Publicado em: 10/12/2003 Atualizado em: 06/06/2014 20/04/2015 06/05/2016
Na atualizao de 2015 deste tutorial foi atualizada tambm a pgina interativa destinada s suas experincias com esta propriedade CSS.
Ir para a pgina interativa atualizada

Estilizando o fundo dos boxes (elementos) HTML

So 8 (oito) as propriedades CSS destinadas a estilizar o fundo de um box HTML. Elas so listadas e descritas sumariamente a seguir.

background-color.........define a cor do fundo;

background-image.........define uma imagem de fundo;
background-repeat........define a maneira como a imagem de
fundo posicionada;
background-attachment....define se a imagem de fundo "rola"
ou no com a tela;
background-position......define como e onde a imagem de fundo
posicionada;
background-clip..........define a rea do box onde a imagem de
fundo aplicada;
background-origin........define a posio de origem da imagem no box;
background-size..........define as dimenses da imagem no box;
background...............maneira abreviada para declarar todas
as propriedades anteriores

Valores vlidos para as propriedades destinadas

a estilizar o fundo de um box HTML
background-color:
1. cdigo hexadecimal: #ffc6d9
2. cdigo rgb: rgb(255,235,0)
3. cdigo rgba: rgb(255,235,0, 0.7)
4. cdigo hsl: hsl(210,100%,40%)
5. cdigo hsla: hsla(155,80%,35%,0.4)
6. palavra-chave: red, blue, green...etc
7. transparente: transparent

background-image:
1. URL: url(caminho/imagem.gif)
2. URL: url('caminho/imagem.gif')
3. URL: url("caminho/imagem.gif")
4. Gradiente linear: linear-gradient(45deg, blue, red)
5. Gradiente radial: radial-gradient(20px 50px, green, blue, red)

O uso de aspas simples ou duplas no URL da imagem facultativo

background-repeat:
1. imagem no repete: no-repeat
2. imagem repete na vertical e horizontal: repeat
3. imagem repete na vertical: repeat-y
4. imagem repete na horizontal: repeat-x
5. imagem toca as quatro bordas internas do box e so espaadas de modo a se distribuirem igualmente: space
6. imagem toca as quatro bordas internas do box e so redimensionadas de modo a preencherem o fundo tocando umas nas outras: round

background-attachment:
1. imagem permanece fixa em relao viewport (janela do navegador) e no rola juntamente com o contedo: fixed
2. imagem no permanece fixa em relao viewport (janela do navegador) e rola juntamente com o contedo - este o valor padro: scroll
3. imagem permanece fixa em relao viewport (janela do navegador) mas quando aplicada ao box de um elemento rola juntamente com o contedo se o elemento tiver um mecanismo de
rolagem definido por overflow: scroll: local

background-position:
1. Xpx Ypx
2. X% Y%
3. top left
4. top center
5. top right
6. center left
7. center center
8. center right
9. bottom left
10. bottom center
11. bottom right
12. top
13. right
14. bottom
15. left

background-clip:
1. a imagem ocupa at a rea das bordas do box, inclusive, se houver uma - este o comportamento padro: border-box
2. a imagem ocupa at a rea de padding do box, inclusive, se houver uma e no ocupa a rea de bordas: padding-box
3. a imagem ocupa at a rea de contedo do boxe no ocupa as reas de padding e bordas se houver: content-box

background-origin:
1. a a imagem tem por origem o canto superior esquerdo do box considerada das bordas do box, se houver uma - este o comportamento padro: border-box
2. a imagem tem por origem o canto superior esquerdo do box sem considerar as bordas do box, se houver uma: padding-box
3. a imagem tem por origem o canto superior esquerdo do box sem considerar o padding e as bordas do box, se houver: content-box

background-size:
1. a imagem ter as dimenses definidas por unidade de medida CSS: 150px 70px
2. a imagem ter suas dimenses originais - este o valor padro: auto
3. a imagem ter as dimenses de modo a que sua maior dimenso ocupe toda a extenso do box e a menor dimenso seja tal que o aspect ratio (relao entre largura e altura) seja preservado:
contain
4. a imagem ter as dimenses de modo a que sua menor dimenso ocupe toda a extenso do box e a maior dimenso seja tal que o aspect ratio (relao entre largura e altura) seja preservado:
cover

Exemplos prticos
Vejamos a seguir alguns exemplos prticos.

background-color
...
<head>
<style rel="stylesheet">/>
body { background-color: #cff; } /*azul claro*/
h2 { background-color: #f00; } /* vermelho */
p { background-color: #0f0; } /* verde */
</style>
</head>
<body>
<h2>Estude CSS</h2>
<p>Com CSS voc controla melhor seu layout</p>
</body>
</html>

Este o efeito da folha de estilo acima:

Estude CSS

Com CSS voc controla melhor seu layout

background-image
...
<head>
<style rel="stylesheet">/>
body { background-image: url("/images/logo-css3.png"); }
</style>
</head>
<body>
</body>
</html>
Este o efeito da folha de estilo acima:

background-repeat (na vertical)

...
<head>
<style rel="stylesheet">/>
body {
background-image: url("/images/logo-html5.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>

Este o efeito da folha de estilo acima:

background-repeat (na horizontal)

...
<head>
style type="text/css">
body {
background-image: url("/images/logo-css3.png");
background-repeat: repeat-x;
}
</style
</head>
<body>
</body>
</html>

Este o efeito da folha de estilo acima:

background-position
...
<head>
<style rel="stylesheet">/>
body {
background-image: url("/images/logo-html5.png");
background-repeat: no-repeat;
background-position: 200px 70px;
}
</style>
</head>
<body>
</body>
</html>
Este o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixel da margem esquerda e 70 pixel da margem superior

Ateno: cuidado ao definir a propriedadebackground-position com uso de valores em porcentagem, pois indespensvel que voc esteja ciente de como a
posio calculada nestes casos para no ser surpreendido com "resultado no esperado".

Definir os valores 0% 0% posiciona o canto superior esquerdo da imagem no canto superior esquerdo do box (as coordenadas do canto superior esquerdo tanto da imagem como do box so
0% 0%).

Definir os valores 100% 100% posiciona o canto inferior direito da imagem no canto inferior direito do box (as coordenadas do canto inferior direito tanto da imagem como do box so 100%
100%).

Definir os valores X% Y% posiciona o ponto da imagem cujas coordenadas so X% Y% no ponto do box cujas coordenadas so X% Y% (as coordenadas X% Y% tanto da imagem como do
box so X% Y%).

A imagem mostrada a seguir foi copiada da especificao do W3C e esclarece o posicionamento com uso dos valores em porcentagem 75% 50%.

background-attachment
...
<head>
<style rel="stylesheet">/>
body {
background-image: url("/images/logo-css3.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>

Este o efeito da aplicao das regras CSS acima em uma pgina web.

background (declarao abreviada)

Esta a maneira abreviada de voc escrever uma regra para as propriedades do fundo.

Voc pode declarar todas ou algumas das propriedades estudadas em uma regra nica conforme mostrado a seguir.
seletor {
background: background-image background-position / background-
size background-repeat
background-attachment background-origin background-clip
background-color;
} /* se um valor for omitido ser considerado o valor padro */

Observe o exemplo abaixo:

...
<head>>
<style rel="stylesheet">/>
body {
background: url("css.gif") 200px 70px /
80% no-repeat fixed content-box content-box #00FF00;
}
</style>
</head>

Mltiplas imagens de fundo

Podemos definir quantas imagens de fundo quisermos, em um mesmo box, posicionando e dimensionando cada uma delas individualmente.

Cada uma das imagens de fundo definidas para um mesmo box cria um layer com uma coordenada z (como se fosse um z-index) definindo sua visibilidade. Os layers so posicionados em uma
pilha de layers colocados uns sobre outros fazendo com que os layers com maior coordenada z se sobreponham queles com menor coordenada z.

ordem de empilhamento, ou seja, a coordenada z definida pela ordem em que a imagem declarada dentro da regra CSS. A primeira imagem declarada recebe a maior coordenada z, a
segunda recebe a segunda maior coordenada e assim por diante at a ltima imagem declarada que recebe a menor coordenada z. A sintaxe para declarar mltiplas imagens de fundo consiste
em separar os valores das propriedades com uma vrgula.

Considere a regra CSS a seguir, destinada a definir trs imagens como fundo de um DIV.

div {
background-image: url(triangulo.png), url(circulo.png), url(retangulo.png);
background-repeat: repeat-x, no-repeat, repeat-y;
background-position: right 120px, center, 0 0;
background-color: #f0c;
}

Na figura seguinte mostramos a renderizao das trs imagens (tringulo, crculo e retngulo) e da cor de fundo.
Visite uma pgina interativa onde voc poder fazer suas experincias com a propriedade CSS background. Bons estudos
Busca no site:

Compartilhe esta matria:

Curtir 6
Tweetar
Partilhar +Maujor

Siga o Maujor no FaceBook:

Conhea os livros do Maujor

Clique a "capinha" para visitar o site do livro

Comentrio em Destaque

Fernando de Sousa 2 meses atrs
Pense num site excelente? Muito obrigado!
17 comentrios
Site do Maujor
Entrar
1

Recomendar 23
Compartilhar
Ordenar por Mais votados

Participe da discusso...

Anexar

o
o

Luano Zubem um ms atrs

Como fao uma imagem seguir o conteudo do meu texto, isto a imagem flutuando ao lado
do texto?

o
o

Fernando de Sousa 2 meses atrs Destacado por Site do Maujor

Pense num site excelente? Muito obrigado!

maujor Maujor > Fernando de Sousa 2 meses atrs

Grato Fernando.
Bons estudos.

Fernando de Sousa > maujor 2 meses atrs

Vou e dar uma olhada nos seus livros, parecem muitssimo
interessantes, se por essa partcula j nos ajudou maravilhosamente,
imagine o que no vir nesses livros?

maujor Maujor > Fernando de Sousa 2 meses atrs

Consulte: http://livrosdomaujor.com.br

Fernando de Sousa > maujor 2 meses atrs

No achei o BootStrap3.3.5 PDF Free pra baixar, terias
algum outro endereo?

o
o

Ale Home 8 meses atrs

Boa noite maujor!

tenha esse cdigo aqui:

.topo {
height: 100vh;
background: url(../img/bg-home.jpg) no-repeat center center fixed;
background-size: cover;
}

funciona aparentemente bem at chegar no mobile.

quando acesso pelo celular, ao rolar a pgina devagar o background do topo se "move".
sabe o porque disso?
 site: http://rpage.hol.es/rpage/5/

o
o

Felipe Andrade um ano atrs

Bom dia a todos, gostaria de saber, se ao usar o recurso de abreviao, "escrevendo as
caractersticas que desejo em uma unica linha" o processamento interno do browser resulta
em uma "busca" em todas as propriedades do meu elemento?

maujor Maujor > Felipe Andrade 9 meses atrs

@Felipe Andrade
O que voc quis dizer com "todas as propriedades do meu elemento"?

o
o

Jeferson Allein Goedert um ano atrs

Muito obrigado pelo seu post, foi de grande ajuda para mim! Ficou muito bem explicado!

o
o

Beatriz 2 anos atrs

Boa tarde.

A tela inicial do meu site um background-image. No computador est tudo ok, mas
quando acesso via mobile no mostra a imagem, mostra apenas uma tela preta. Algum j
passou por isso?

o
 Esse comentrio foi apagado.
o

Ismael Ezequiel > Guest 2 anos atrs

Tente:

background-image: url("../imagens/recreio.jpeg")

Lucas de Oliveira > Guest 2 anos atrs

A pasta "imagens" est dentro da pasta com o arquivo html?

o
o

Marcelo Castro 2 anos atrs

Ol!
Pergunta: quero que todas as divs de meu projeto tenham bordas arredondas e mesma cor:
preciso repetir estas informaes div por div?
H alguma maneira de "dizer" que toda e qualquer div criada segur estas determinaes?

maujor Maujor > Marcelo Castro 2 anos atrs

Sim. Use o seletor tipo DIV.
Por exemplo:
div {
border-radius: 10px;
 background: red;
}

Jnior Santoss > maujor 2 anos atrs

Poderia criar uma class no css e us-la nas div's que julgar necessrio ;)

o
o

Tefilo Torres 2 anos atrs

Gostaria da aula de: Como Validar a Pgina Contato da bbmotores.com.br do livro Criando
Sites com HTML. (com JavaScript e html)

TAMBM EM SITE DO MAUJOR

Tutorial CSS - Full-Stach Developer

o 2 comentrios
o um ano atrs

Junior Castro Ol amigo, imagino que eles estejam equivocados quanto a isso, o front
tudo isso sim. Estude, se especialize, estude javascript, angular, node etc...Nao desanime :-)

Tutorial CSS - CSS3 Filters

o 1 comentrio
o 2 anos atrs

Dnis Nunes top como sempre, vlw Maujor, dica muito til, seria legal um tutorial de como criar
uma color whell, no sei se vc j tem um tuto desses, seria mto interessante.

A metodologia BEM para criao de cdigos legveis

o 3 comentrios
o 9 meses atrs
 maujor Ol Jos Olinda,No sou especialista em Metodologia BEM, contudo acredito que a
quantidade de bytes acrescidos em um arquivo CSS em razo do uso de underscores e hfens

Tutorial CSS - Elemento picture para imagens responsivas

o 1 comentrio
o 3 anos atrs

Andr Luis Bonfim Excelente artigo! Cheguei aqui por indicao, pois estava interessado em
saber mais sobre imagens responsivas para usar em novos projetos. Bom saber que a tag pictures j

Desenvolvido por Disqus

Inscreva-se
d Adicione o Disqus no seu site
Privacidade