Por padrão, em uma página da web, uma imagem aparece no canto superior esquerdo da tela e é repetido horizontal e verticalmente. No entanto, para mudar sua posição atual, o CSS oferece um “posição de fundo”Propriedade que especifica a posição da imagem de fundo, como o centro.

Neste artigo, aprenderemos como definir a posição de uma imagem de fundo com a ajuda de exemplos. Para fazer isso, em primeiro lugar, demonstraremos o procedimento de adicionar uma imagem como pano de fundo no CSS.

Adicione imagens de fundo usando a propriedade “Imagem de fundo”

Para adicionar imagens em segundo plano, o “imagem de fundo”Propriedade é utilizada.

Sintaxe

A seguir, a sintaxe para definir uma imagem de fundo para um elemento HTML:

Imagem de fundo: url ();

Aqui, "url ()”Especifica o nome da imagem ou o caminho da pasta de imagem no qual existe.

Agora, vá para o exemplo prático de usar a propriedade de imagem-background.

Exemplo: Inserindo uma imagem de fundo usando CSS

Neste exemplo, criaremos um

elemento e fundo serão adicionados atrás deste elemento. Você pode adicionar elementos de acordo com sua escolha e aplicar a propriedade de imagem-plano a ela:

Linuxhint

Depois disso, vá para o CSS, use o “imagem de fundo”Propriedade, atribua o caminho ou nome da imagem no AS“url ()”Valor da propriedade de imagem de fundo:

corpo
Imagem de fundo: URL ("IMG.jpg ");

Isso dará o seguinte resultado:

É assim que você pode adicionar uma imagem de fundo no CSS.

Como centralizar imagens de fundo usando a propriedade CSS “posição de fundo”?

O "posição de fundo”Propriedade define a posição da imagem em segundo plano. A sintaxe será a seguinte:

Posição de fundo: valor

A posição da imagem pode ser especificada como absoluta, esquerda ou direita. Mais especificamente, definindo o “Centro”O valor centralizará a imagem de fundo adicionada.

Agora, vamos passar para o exemplo prático que demonstra como usar as propriedades de imagem e posição de fundo no CSS.

Exemplo: como definir a imagem de fundo no centro?

Vamos definir o caminho de cor e imagem com o “fundo" propriedade. Em seguida, utilizaremos o “posição de fundo”Propriedade para definir a imagem de fundo no centro. Finalmente, vamos definir o “fundo de repetição”Propriedade para não repetir por não repetir a imagem:

corpo
Antecedentes: RGB (128, 44, 12) URL ("Imagem.jpg ") fixado;
Posição de fundo: centro;
Repetição de fundo: sem repetição;

Depois de tudo pronto, execute o código e vamos dar uma olhada no resultado final:

Nossa imagem de segundo plano está posicionada com sucesso no centro da página.

Conclusão

As imagens de fundo podem ser adicionadas usando a propriedade de imagem de fundo, enquanto a posição de fundo pode ser definida usando a propriedade de posição de fundo. Para o centro, a imagem de fundo no CSS define o valor da propriedade de posição de fundo para “Centro”. O artigo explica em detalhes como adicionar uma imagem ao plano de fundo usando “imagem de fundo”E como definir sua posição usando o“posição de fundo" propriedade.