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
Define 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
background-size especifica o tamanho da imagem de fundo de um elemento. Pode ser utilizado para redimensionar a imagem para se ajustar ao elemento ou definir um tamanho específico para a imagem de fundo.
background-size: auto | cover | contain | value in px/em/rem;
automantém a imagem de fundo em seu tamanho original (padrão);coverredimensiona a imagem para cobrir completamente o elemento, mantendo sua proporção, podendo cortar partes da imagem;containredimensiona a imagem para caber inteiramente dentro do elemento, mantendo sua proporção, podendo deixar espaços vazios;valuedefine dimensões personalizadas para a imagem de fundo, como100px 50pxou porcentagens como50%.
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
Awesome!
Completion rate improved to 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
Define 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
background-size especifica o tamanho da imagem de fundo de um elemento. Pode ser utilizado para redimensionar a imagem para se ajustar ao elemento ou definir um tamanho específico para a imagem de fundo.
background-size: auto | cover | contain | value in px/em/rem;
automantém a imagem de fundo em seu tamanho original (padrão);coverredimensiona a imagem para cobrir completamente o elemento, mantendo sua proporção, podendo cortar partes da imagem;containredimensiona a imagem para caber inteiramente dentro do elemento, mantendo sua proporção, podendo deixar espaços vazios;valuedefine dimensões personalizadas para a imagem de fundo, como100px 50pxou porcentagens como50%.
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!
