Introdução
Podemos determinar o tamanho da imagem de fundo com a ajuda da propriedade background-size. Podemos deixar a imagem à esquerda, esticada e ajustada ao espaço disponível. Existem muitas sintaxes para a implementação da propriedade background-size. Podemos definir a propriedade background-size com a ajuda de valores e valores unitários.
Em valores unitários, podemos definir a propriedade background-size na forma de porcentagens ou pixels. Podemos defini-lo também com a ajuda do valor global. Podemos implementá-lo com a ajuda do valor global através da ajuda do trecho abaixo.
quão grande é a tela do meu monitor
.card-hero inherit
Vamos entender o assunto brevemente.
Valores de palavras-chave
Podemos usar o valor da palavra-chave com a ajuda de cobrir e conter. Podemos alterar o tamanho do plano de fundo com a ajuda desses valores de palavras-chave.
1. Capa:
Podemos definir o tamanho do plano de fundo com a ajuda da palavra-chave cover. Se definirmos o tamanho do fundo como capa, a imagem caberá no container sem deixar espaço. Também aprimorará a imagem para caber na tela.
Vamos entender isso com a ajuda do exemplo abaixo.
Exemplo 1:
qual é o tamanho da tela do meu monitor
Código:
Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url('https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp'); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> Saída
Explicação:
No código acima, três imagens de fundo são combinadas usando a propriedade background-image. A propriedade background-size especifica os tamanhos de cada imagem de fundo: 30% de largura para a primeira imagem, 40% de largura para a segunda imagem e capa para a terceira imagem. A propriedade background-position é definida de forma diferente para cada imagem para criar uma composição equilibrada.