CSS 05 - Cores e Fundos

CSS - Cores e fundos
Você vai aprender agora como aplicar cores de primeiro plano e cores de fundo no seu
website. Abordaremos ainda os métodos avançados de controle e posicionamento de
imagens de fundo.
Cor do primeiro plano: a propriedade 'color'
A propriedade color define a cor do primeiro plano de um elemento. Considere, por

exemplo, que desejamos que todos os cabeçalhos de primeiro nível no documento sejam
na cor vermelha. O elemento HTML que marca tais cabeçalhos é o elemento <h1>. O
código a seguir define todos os <h1> na cor vermelha.
h1 {
color: #ff0000;
}
As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima
(#ff0000), com uso do nome da cor ("red") ou ainda pelo seu valor rgb (rgb(255,0,0)).
Cor do segundo plano: a propriedade 'background-color'
A propriedade background-color define a cor do fundo de um elemento. O elemento

<body> contém todo o conteúdo de um documento HTML. Assim, para mudar a cor de
fundo da página, devemos aplicar a propriedade background-color ao elemento <body>.
Você pode aplicar cores de fundo para outros elementos, inclusive para cabeçalhos e
textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os elementos
<body> e <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Material extra: gerador de cor de fundo gradiente (variação gradiente da cor):

https://cssgradient.io/
Imagens de fundo [background-image]
A propriedade CSS background-image é usada para definir uma imagem 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.
body {
background-image: url("imagem.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Obs.: Note como foi especificado o caminho para a imagem usando 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("../images/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 Descrição
background-repeat: repeat-x A imagem se repete na horizontal
background-repeat: repeat-y A imagem se repete na vertical
background-repeat: repeat Se repete na horizontal e 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-image: url("butterfly.gif");
background-repeat: no-repeat;
}
Image 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. Veja os exemplos para constatar a diferença entre imagem
fixa e imagem que rola.
Valor Descrição
background-attachment: scroll A imagem rola com a página
background-attachment: fixed A imagem é fixa
Por exemplo, o código abaixo fixa a imagem na tela.
body {
background-attachment: fixed;
}
Posição da imagem de fundo [background-position]
Por padrão uma imagem de fundo é posicionada no canto superior esquerdo da tela. 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 janela, em 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:
Valor Descrição
a imagem é posicionada a 2 cm da
background-position: 2cm 2cm
esquerda a 2 cm do topo da página.
a imagem é centrada (50%) e fica a um
background-position: 50% 25%
quarto (25%) do topo da página.
a imagem é posicionada no canto
background-position: top right
superior direito da página.
No exemplo de código a seguir a imagem é posicionada no canto inferior direito da
página:
body {
background-position: right bottom;
}
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.
Por exemplo, observe as cinco linhas a seguir:
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
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("imagem.gif") 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).
Outra opção interessante para usar com o background é a definição do tamanho da
imagem em relação a página. Assim vc pode centralizar a imagem, fixá-la e definir o
tamanho que ela ocupará na tela onde a página estará sendo visualizada.
Função do estilo background-size
O objetivo do estilo background-size é definir qual será o tamanho da imagem de fundo

de alguma tag, geralmente uma <div>. Para isso, ele recebe três possíveis valores: um
número, a expressão “cover” ou a expressão “contain”. Nós iremos falar sobre cada um
desses valores agora.
1 - Um número. Com esse valor podemos informar a largura e a altura da imagem de

fundo. Esse valor por ser tanto em pixels como em porcentagem. Exemplo:
div {
background: url('example.jpg') no-repeat;
background-size: 100px;
}
Se informarmos apenas um número, como no caso acima, tanto a largura como a altura
serão de 100 pixels. Se desejarmos especificar também a altura, basta informar seu valor
após o primeiro número, como podemos ver abaixo:
div {
background: url('example.jpg') no-repeat;
background-size: 100px 200px;
}
Vamos falar agora sobre os valores “cover” e “contain”. Os dois possuem o mesmo
objetivo: fazer com que a imagem de fundo ocupe o máximo possível a área onde ela foi
aplicada e também manter a proporção da imagem. Mas há uma pequena diferença entre
esses dois valores.
2 - Expressão “cover”. Esse valor faz com que a imagem ocupe o espaço inteiro onde
foi aplicada. Mas, para isso, ele realiza alguns cortes na imagem se ela tiver dimensões
diferentes da área de sua ocupação.
3 - Expressão “contain”. Esse valor faz com que a imagem ocupe o máximo possível da
área onde foi aplicada. Contudo, ele não realiza nenhum corte na imagem. Mesmo se ela
tiver dimensões diferentes da área de sua ocupação, será garantido que ela estará
“contida” na tag por completo. Se a imagem não puder conter 100% da área, a cor de
fundo da tag será usada, se ela for definida.
Exemplo:
Vamos criar um arquivo HTML que irá conter uma <div>, onde adicionaremos um
background. Ela possuirá o ID “background-example”. Esse arquivo HTML também
fará referência para um arquivo chamado style.css, onde iremos aplicar nossos estilos
CSS.
Vamos testar primeiro o background-size informando um valor em números. O
conteúdo do arquivo CSS será o seguinte:
#background-example {
width: 600px;
height: 500px;
background: url('./image.jpg') no-repeat;
background-color: #ccc;
background-size: 200px;
}
Explicando: a nossa <div> possuirá uma largura de 600 pixels e uma altura de 500
pixels. Nós também definimos uma cor de fundo cinza para enxergar o real tamanho da
<div>. Por fim, nossa imagem de fundo terá 200 pixels tanto de largura quanto de
altura. Ou seja, terá dimensões menores do que a <div> onde foi aplicada. O resultado
no navegador será o seguinte:
A imagem foi adicionada como background sem problemas. Contudo, sobrou muito
espaço vazio em nossa <div>, visto que a imagem tinha dimensões menores do que
ela.Vamos aplicar o valor “contain” agora. O conteúdo CSS ficará assim:
width: 600px;
height: 500px;
background-size: contain;
}
O resultado em nosso navegador será este:
Agora nossa imagem ficou maior e ocupou uma grande parte da <div>. Contudo, esse
foi o máximo de ocupação possível sem que precisasse realizar cortes na imagem.
Assim, foi necessário usar a cor de fundo para terminar de ocupar a área total da <div>.
Por fim, vamos usar o valor “cover”. Nosso CSS ficará dessa maneira:
width: 600px;
height: 500px;
background-size: cover;
}
Este será o resultado no navegador:

Agora sim nossa imagem ocupou a área inteira da <div>. Entretanto, para que isso fosse
possível sem perder a sua proporção, para que ela não ficasse esticada, foi necessário
realizar cortes nela.
Talvez pensemos: “Mas agora não dá pra ver a imagem direito. Afinal, cortou grande
parte dela”. Algo que podemos fazer para solucionar esse problema é usar o estilo
background-position. Vamos adicioná-lo ao nosso seletor CSS informando como seu
valor a expressão “center”:
background-position: center;
O resultado no navegador agora será este:
A imagem ficou bem melhor agora, pois está posicionada em seu centro. O estilo
background-position é bem interessante.
Vimos por meio de exemplos práticos as diferenças entre os possíveis valores para o
estilo background-size. Com esse conhecimento estamos agora preparados para decidir
quando usar esse estilo e qual de seus valores escolher.

CSS 05 - Cores e Fundos

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CSS 05 - Cores e Fundos

Enviado por

Direitos autorais:

Formatos disponíveis

CSS - Cores e fundos

Cor do primeiro plano: a propriedade 'color'

A propriedade color define a cor do primeiro plano de um elemento. Considere, por

Cor do segundo plano: a propriedade 'background-color'

A propriedade background-color define a cor do fundo de um elemento. O elemento

Material extra: gerador de cor de fundo gradiente (variação gradiente da cor):

Imagens de fundo [background-image]

url("../images/imagem.gif") ou até mesmo hospedá-la na Internet:

Imagem de fundo repetida [background-repeat]

Image de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem será fixa ou se irá rolar

Posição da imagem de fundo [background-position]

A propriedade background é uma abreviação para todas as propriedades listadas

Por exemplo, observe as cinco linhas a seguir:

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

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

A declaração abreviada deve seguir a seguinte ordem:

background: #FFCC66 url("imagem.gif") no-repeat;

Função do estilo background-size

O objetivo do estilo background-size é definir qual será o tamanho da imagem de fundo

1 - Um número. Com esse valor podemos informar a largura e a altura da imagem de

Este será o resultado no navegador:

O resultado no navegador agora será este:

Você também pode gostar