Conteúdo do Curso
CSS Fundamentals
1. Introdução ao CSS
3. Modelo de Caixa e Espaçamento de Elementos
CSS Fundamentals
Imagem de Fundo
A propriedade background-image permite-nos adicionar uma imagem como fundo de um elemento HTML. A sintaxe básica é muito simples:
Como valor para a propriedade background-image, usamos url(), e dentro destes parênteses, especificamos o URL da imagem.
index.html
index.css
index.js
background-repeat
Determina se a imagem será repetida horizontalmente, verticalmente, ambas ou não será repetida de todo.
index.html
index.css
index.js
background-position
background-position é usado para definir a posição inicial de uma imagem de fundo dentro da área de fundo de um elemento. Essa propriedade nos permite especificar onde a imagem de fundo deve ser colocada e como ela deve ser posicionada em relação ao elemento. Temos que definir a posição nos eixos x e y.
index.html
index.css
index.js
tamanho do fundo
tamanho do fundo especifica o tamanho da imagem de fundo de um elemento. Pode ser usado para escalar a imagem de forma que se ajuste ao elemento ou para definir um tamanho específico para a imagem de fundo.
auto- valor padrão, que define a imagem de fundo para o seu tamanho original.cover- escala a imagem de fundo para cobrir completamente o elemento mantendo sua proporção. Isso pode fazer com que partes da imagem sejam cortadas se a proporção do elemento e da imagem forem diferentes.contain- escala a imagem de fundo para caber no elemento inteiro, mantendo sua proporção. Isso pode causar espaços vazios ao redor da imagem se a proporção do elemento e da imagem forem diferentes.value- define a largura e a altura da imagem de fundo.
Para este exemplo, usaremos uma imagem maior do que a necessária, pois desejamos considerar a diferença de comportamento de cada valor para a propriedade background-size.
index.html
index.css
index.js
Tudo estava claro?
Conteúdo do Curso
CSS Fundamentals
1. Introdução ao CSS
3. Modelo de Caixa e Espaçamento de Elementos
CSS Fundamentals
Imagem de Fundo
A propriedade background-image permite-nos adicionar uma imagem como fundo de um elemento HTML. A sintaxe básica é muito simples:
Como valor para a propriedade background-image, usamos url(), e dentro destes parênteses, especificamos o URL da imagem.
index.html
index.css
index.js
background-repeat
Determina se a imagem será repetida horizontalmente, verticalmente, ambas ou não será repetida de todo.
index.html
index.css
index.js
background-position
background-position é usado para definir a posição inicial de uma imagem de fundo dentro da área de fundo de um elemento. Essa propriedade nos permite especificar onde a imagem de fundo deve ser colocada e como ela deve ser posicionada em relação ao elemento. Temos que definir a posição nos eixos x e y.
index.html
index.css
index.js
tamanho do fundo
tamanho do fundo especifica o tamanho da imagem de fundo de um elemento. Pode ser usado para escalar a imagem de forma que se ajuste ao elemento ou para definir um tamanho específico para a imagem de fundo.
auto- valor padrão, que define a imagem de fundo para o seu tamanho original.cover- escala a imagem de fundo para cobrir completamente o elemento mantendo sua proporção. Isso pode fazer com que partes da imagem sejam cortadas se a proporção do elemento e da imagem forem diferentes.contain- escala a imagem de fundo para caber no elemento inteiro, mantendo sua proporção. Isso pode causar espaços vazios ao redor da imagem se a proporção do elemento e da imagem forem diferentes.value- define a largura e a altura da imagem de fundo.
Para este exemplo, usaremos uma imagem maior do que a necessária, pois desejamos considerar a diferença de comportamento de cada valor para a propriedade background-size.
index.html
index.css
index.js
Tudo estava claro?
