No HTML, imagens de fundo são usadas para estilizar e aprimorar a aparência das páginas da web. Por padrão, as imagens da página da web são exibidas no canto superior esquerdo da tela. No entanto, você pode redimensionar a imagem no modo de tela cheia. CSS fornece “posição de fundo" e "tamanho de fundo”Propriedades que podem ser usadas para forçar uma imagem a ser exibida em toda a tela.

Neste manual, você aprenderá o método de adicionar uma imagem de fundo no modo de tela cheia.

Vamos começar!

Como fazer imagem de fundo em tela cheia usando CSS?

Para fazer o fundo de tela cheia usando CSS, primeiro, crie uma div e ajuste sua largura e altura e margem para que ele apareça na tela inteira usando o “largura","altura", e "margem”Propriedades do CSS. Em seguida, adicione uma borda ao redor usando o “fronteira" propriedade. Para definir a fronteira de acordo com a tela, use o “tamanho de caixa" propriedade. Uma vez feito, utilizaremos a propriedade de “fundo”Para adicionar a imagem em segundo plano.

A sintaxe da propriedade em segundo plano é:

Antecedentes: Background-Imagem (URL) Repetição de fundo posição de fundo/ tamanho de fundo

Na sintaxe mencionada acima, são mencionadas as quatro propriedades seguintes da propriedade em segundo plano:

• imagem de fundo: É utilizado para adicionar uma imagem como um fundo.
• fundo de repetição: É usado para definir o padrão da repetição da imagem de fundo, como sem repetição, repetir horizontalmente e repetir verticalmente.
• Posição de fundo: É usado para ajustar a posição da imagem, como centro, esquerda e direita.
• tamanho de fundo: É usado para definir o tamanho da imagem, como auto, cobertura e comprimento.

Vamos passar para o exemplo em que faremos uma imagem de fundo em tela cheia usando CSS.

Exemplo

No HTML, criaremos um contêiner e definiremos seu nome de classe como “div”E adicione o cabeçalho usando o

marcação. Além disso, para colocar o título no centro da página, usaremos a tag.

Html

Bem -vindo ao Linuxhint

Em seguida, atribua o valor da propriedade da margem como “0"E altura como"100px”Para todo o corpo do HTML.

CSS

html, corpo
margem: 0;
Altura: 100%;

Na próxima etapa, estilize o contêiner criado usando “div”E ajuste a largura e a altura da div como“100px”. Usaremos a propriedade da fronteira para adicionar a borda ao redor da div com “25px"Largura, estilo como"sulco”E cor da fronteira como“RGB (184, 147, 147)”:

div
largura: 100%;
Altura: 100%;
fronteira: groove 25px RGB (184, 147, 147);

O resultado do código acima mencionado é dado abaixo. Você pode ver que o cabeçalho e a borda são criados:

Observação: Como você pode ver, na borda da imagem acima fornecida da direita e do fundo está oculta, isso ocorre porque a largura e a altura da div já estão “100%”Então, quando adicionarmos uma borda, será adicionada largura e altura adicionais. Para evitar isso, usaremos o “tamanho de caixa”Propriedade do CSS, pois nos permite incluir uma borda na largura e altura do elemento.

Para fazer isso, definiremos o valor do tamanho de caixa como “Border-box”Para incluir a fronteira dentro da largura e altura total da div:

Timing de caixa: caixa de fronteira;

A imagem abaixo do ritmo indica que a borda é colocada com sucesso dentro da largura e altura da div:

Agora, adicionaremos a imagem de fundo usando o “imagem de fundo”Propriedade e especifique o URL da imagem como“URL (imagem.jpg)”:

div
Antecedentes: URL ("Imagem.jpg ");

Na imagem abaixo fornecida, você pode ver que a imagem de fundo é adicionada com sucesso, mas é repetitiva:

Para evitar a repetição da imagem, o “fundo de repetição”Propriedade é utilizada. Aqui, definiremos o valor da repetição de fundo como “sem repetir”:

div
Imagem de fundo: URL ("Imagem.jpg ");
Repetição de fundo: sem repetição;

Na saída abaixo fornecida, você pode ver que a repetição da imagem está interrompida; No entanto, a imagem não é exibida na tela:

Para exibir a imagem em tela cheia, utilizaremos o “tamanho de fundo" propriedade. E defina seu valor como “cobrir”, O que significa que a imagem cobrirá toda a área do contêiner criado:

div
Imagem de fundo: URL ("Imagem.jpg ");
Repetição de fundo: sem repetição;
Size de fundo: capa;

A imagem abaixo indica que a imagem é exibida na tela cheia e é cortada. Isso ocorre porque o tamanho da imagem é maior que o tamanho da div:

Para corrigir esse problema, use o “posição de fundo”Propriedade e defina a posição da imagem como“Centro”:

div
Imagem de fundo: URL ("Imagem.jpg ");
Repetição de fundo: sem repetição;
Size de fundo: capa;
Posição de fundo: centro;

Como resultado, a imagem selecionada será exibida no modo de tela cheia:

É isso! Explicamos o método para criar uma imagem de fundo em tela cheia usando CSS.

Conclusão

Para criar uma imagem de fundo em tela cheia usando CSS, primeiro, crie uma div e defina a largura, a altura e as margens para preencher a tela. Depois disso, crie uma borda ao redor da div e adicione uma imagem usando o “imagem de fundo" propriedade. Para ajustar a imagem de acordo com a tela cheia, use o “fundo de repetição","tamanho de fundo", e "posição de fundo”Propriedades. Este artigo explicou o método completo para criar a imagem de fundo em tela cheia usando CSS.