Nomenclatura dos Backgrounds em css
Mesmo para quem já anda nisto há algum tempo aqui fica a dica.
Como todos sabem, tentamos sempre abreviar mais possível uma determinada tag; não só para motivos de rapidez de escrita e clarificação da tag mas também por motivos de peso da folha de estilo.
Neste âmbito, temos usado a tag background que mudou muito desde a sua forma decomposta:
background-attachment:fixed;
background-color:# 00FF00;
background-image: url(“css.gif”);
background-position:left;
background-repeat:no-repeat;
até há sua forma mais abreviada:
background: #00FF00 url(“css.gif”) no-repeat fixed 200px 70px;
em qualquer ordem, podendo ser omitido um mais valores.
No entanto, e para facilitar a leitura imediata da respectiva tag vamos construir sempre por esta ordem:
background: color image repeat attachment position
(ex: background: #00FF00 url(“css.gif”) no-repeat fixed left top;)
Assim seguimos a ordem de prioridade de baixo para cima:
- Cor de fundo;
- Qual a imagem;
- Repete-se ou não;
- Como é que ela deve estar no ecrã (fixa ou com scroll);
- Qual o seu posicionamento;
Neste último podem usar a nomenclatura normal letf, right, top, bottom, center;
ou o posicionamento por pixéis separado espaços. Aqui tem um exemplo de todos esses elementos:
Left:
left top
left center
left bottom
center:
center top
center center
center right
right:
right top
right center
right bottom
uma declaração:
left
center
right
pixel:
-10px -20px (left top)
150px 10px (left top)
210px 100px (left top)
Percentagem:
50% 10% (left top)
100% 30% (left top)
45% 100% (left top)
A aplicar na seguinte forma e como exemplo: background: #000000 url(“image.gif”) no-repeat fixed 200px 70px;
Se por acaso, por alguma razão, for necessário um posicionamento para os quatro pontos (left, top, right, bottom) deve se separa esse posicionamento do resto da nomenclatura:
Ex:
background: #00FF00 url(“css.gif”) no-repeat fixed);
background-position: (10px 10px 10px 10px);
Sendo a sua ordem em pixéis : (top right bottom left).
Isto deve-se ao facto de a nomenclatura de posicionamento abreviada não suportar os 4 elementos de uma vez só.
autor: João Da Silva