Módulo 03

ir para página 02

Imagens de Fundo

A várias formas de colorir um bloco ➔ podemos utilizar background-color: cor, que irá deixar o bloco com uma cor única, ou background-image: linear-gradient que permite um degrade e agora vamos colocar uma imagem de fundo no bloco, utilizando background-image: url, essas imagens de fundo podem ser de uma imagem salva no servidor ou uma disponivel na internet

A imagem se repete para completar todo o bloco que ela está designada, por tanto se for uma imagem muito pequena ela será replicada inumeras vezes até completar todo bloco, no entanto nas configurações de css pode-se configurar se não deseja que as imagens sejam replicadas utilizando backgroud-repeat: no-repeat, ou se quiser que a imagem se repita em apenas uma direção, como por exemplo, somente no eixo x, utiliza-se backgroud-repeat: repeat-x

No entanto, se a imagem escolhida for muito grande ela o bloco será preenchido com apenas um pedaço da imagem, ou seja, a imagem não se adapta ao tamanho do bloco, exemplo dos blocos que aparecem um prédio, na primeira imagem aparece somente um pedaço de um dos prédios, mas no segundo bloco ao utilizar background-size e definir um tamanho menor para imagem é possível ver ela por completo

Posicionando a imagem de fundo

posição: left top

posição: left center

posição: right bottom

posição: center center

Fundo com a main

Para quando for configurar o fundo inteiro da página, algumas propiedades podem ajudar como background-size: 100% e background-repeat: o-repeat essa propiedade não distorce a imagem tranforme muda o tamanho da tela, porém quando o tamanho da imagem é menor que o tamanho da página o que falta fica preto.
Se mudar os dois background-size: 100% 100% e height: 100vh a imagem passa a ficar do tamanho da tela porém distorce a imagem quando aumenta ou diminui o tamanho da página

Outra forma seria o é backgroud-size: contains, que mostra a imagem por inteiro, no entanto pode também não resolver, se deixar parte da tela preta, imagem não muito grande ou página aberta em uma tv.

Outra forma ainda seria a propiedade backgroud-size: cover que cobre a tela inteira, mesmo que seja preciso cortar um pedaço da imagem para adaptar a página

É possível deixar a imagem de fundo travada na tela para que ela não fique se mexendo durante a rolagem da página background-attachment: fixed;

SHORTHAND - backgroud segue a seguinte ordem: color image position repeat attachment

* detalhe em teoria o size faz parte ficando entre repeat e attachment entretanto no momento não está funcionando então tem que configurar ele individualmente

CENTRALIZAÇÃO VERTICAL

Para alinhar um bloco horizitalmente pode-se utilizar a propiedade margin:auto; entretanto para alinhar verticalmente não tem uma propiedade especifica. Por exemplo se estiver utilizando um article dentro de um section e quiser deixa-lo centralizado, tanto na vertical tanto na horizontal, pode configurar as seguintes propiedade:

Foi utilizado no fundo um alvo para ter certeza que esta no meio

Para ficar bem centralizado é preciso configurar a propiedade transform: translate(); para alinhar os dois centros