Aplicando Imagens de Fundo aos Elementos
A propriedade background-image permite adicionar uma imagem como plano de fundo de um elemento HTML. A sintaxe básica é bastante simples:
background-image: url("image-url.jpg");
Como valor para a propriedade background-image, utiliza-se url(), e dentro desses parênteses, especifica-se a URL da imagem.
index.html
index.css
background-repeat
Determina se a imagem será repetida horizontalmente, verticalmente, em ambas as direções ou não será repetida.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position é utilizado para definir a posição inicial de uma imagem de fundo dentro da área de fundo de um elemento. Esta propriedade permite especificar onde a imagem de fundo deve ser colocada e como deve ser posicionada em relação ao elemento. É necessário definir a posição nos eixos x e y
background-position: x y
index.html
index.css
background-size
Controla como a imagem de fundo é dimensionada:
background-size: auto | cover | contain | value in px/em/rem;
auto: tamanho original da imagem;cover: preenche todo o elemento, pode cortar;contain: ajusta toda a imagem, pode deixar espaço vazio;value: tamanho personalizado (ex.:100px50px,50%).
index.html
index.css
1. O que a propriedade background-image faz?
2. O que a propriedade background-repeat faz?
3. Qual propriedade determina a posição da imagem de fundo de um elemento?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you show me an example of how to use all these background properties together?
What is the difference between `cover` and `contain` for background-size?
How do I center a background image both vertically and horizontally?
Incrível!
Completion taxa melhorada para 2.56Aplicando Imagens de Fundo aos Elementos
Deslize para mostrar o menu
A propriedade background-image permite adicionar uma imagem como plano de fundo de um elemento HTML. A sintaxe básica é bastante simples:
background-image: url("image-url.jpg");
Como valor para a propriedade background-image, utiliza-se url(), e dentro desses parênteses, especifica-se a URL da imagem.
index.html
index.css
background-repeat
Determina se a imagem será repetida horizontalmente, verticalmente, em ambas as direções ou não será repetida.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position é utilizado para definir a posição inicial de uma imagem de fundo dentro da área de fundo de um elemento. Esta propriedade permite especificar onde a imagem de fundo deve ser colocada e como deve ser posicionada em relação ao elemento. É necessário definir a posição nos eixos x e y
background-position: x y
index.html
index.css
background-size
Controla como a imagem de fundo é dimensionada:
background-size: auto | cover | contain | value in px/em/rem;
auto: tamanho original da imagem;cover: preenche todo o elemento, pode cortar;contain: ajusta toda a imagem, pode deixar espaço vazio;value: tamanho personalizado (ex.:100px50px,50%).
index.html
index.css
1. O que a propriedade background-image faz?
2. O que a propriedade background-repeat faz?
3. Qual propriedade determina a posição da imagem de fundo de um elemento?
Obrigado pelo seu feedback!
