Estabelecer uma imagem de fundo CSS?
Este tutorial demonstrará como esticar imagens de fundo com CSS.
Como esticar a imagem de fundo com CSS?
Para esticar a imagem de fundo com CSS, experimente as instruções fornecidas.
Etapa 1: Crie o primeiro contêiner de div
Primeiro, adicione um “div“Container utilizando o“”Tag e atribua -o a um“eu ia”Atributo dentro do contêiner.
Etapa 2: Adicionar cabeçalho
Adicione um título usando o “”Tag no documento HTML. O "
”A tag é usada para incorporar o título de nível um.
Etapa 3: Faça o Segundo Div Container
Em seguida, crie outro ““Container junto com o“aula”Atributo, adicione uma tag de título“”E incorpore o cabeçalho. Depois disso, adicione outro "" seguindo o mesmo procedimento:
Antecedentes-tamanho: Capa:
Antecedentes-tamanho: 100% automático:
Etapa 4: estilo de contêiner de estilo de estilo
Aqui, acesse o elemento “” com classe “IMG-1" com a ajuda de ".”Seletor e aplique as seguintes propriedades do CSS:
borda: 3px RGB sólido (240, 12, 12);
Largura: 500px;
Altura: 200px;
Antecedentes: URL (emoji.png);
Size de fundo: capa;
Aqui:
- O "fronteira”Propriedade define um limite ao redor do elemento.
- ““largura”Define o tamanho do elemento horizontalmente.
- ““altura”Especifica o tamanho do elemento verticalmente.
- ““fundo”É utilizado para alocar a cor de fundo do elemento.
- ““tamanho de fundo”Propriedade com a“cobrir”O valor é usado como o tamanho de fundo que escala a imagem para preencher o recipiente:
Etapa 5: Estilo Segundo Classe de Container
Acesse o segundo contêiner div, utilizando o nome da classe “.IMG-2”E aplique as propriedades listadas dadas:
fronteira: 3px RGB sólido (226, 17, 17);
Largura: 500px;/ * Largura da tela */
Altura: 200px;/ * Altura da tela */
Antecedentes: URL (emoji.png);
Repetição de fundo: sem repetição;
Antecedentes-tamanho: 100% automático;
No bloco de código acima:
- O "fundo de repetição”A propriedade é utilizada para repetir a imagem ao longo dos eixos horizontais e verticais. Aqui, o valor é definido como “sem repetir”Por não repetir a imagem.
- Então o "tamanho de fundo"É definido como"100% automático”.
Saída
Pode -se notar que esticamos com sucesso a imagem de fundo usando CSS.
Conclusão
Para esticar a imagem de fundo, primeiro, utilize o “fundo”Propriedade para definir a imagem de fundo para um elemento junto com o valor como“url”. Em seguida, use a propriedade CSS “tamanho de fundo" como "cobrir" ou "100% automático”Para esticar a imagem. Este post ensinou a você como o CSS estica a imagem de fundo.