CSS fornece propriedades diferentes para estilizar os elementos HTML. Essas propriedades são usadas para fins diferentes, como adicionar uma imagem e cor de fundo e definir a largura e a altura dos elementos html. Essas propriedades incluem margem, cor, largura, altura, fundo, cor de fundo e muito mais. Mais especificamente, a propriedade de segundo plano e cor de fundo é usada para definir o fundo dos elementos HTML.

Neste manual, aprenderemos a diferença entre as propriedades de fundo e a cor de fundo em detalhes.

Vamos começar!

Propriedade de fundo do CSS

Para ajustar o fundo de qualquer elemento HTML, o CSS “fundo”Propriedade é utilizada. É uma propriedade abreviada de mais oito propriedades, o que significa que você pode usar todas elas em uma linha. Essas outras propriedades são:

• cor de fundo
• imagem de fundo
• posição de fundo
• tamanho de fundo
• fundo de repetição
• origem-origem
• clipe de fundo
• Antecipação de fundo

Sintaxe

Aqui está a sintaxe da propriedade em segundo plano:

Background: Posição da imagem colorida/tamanho Repita o acessório de clipe de origem

Vamos mudar para a explicação de todas as propriedades acima mencionadas uma por uma.

Propriedade da cor de fundo do CSS

Usando o “cor de fundo”Propriedade, você pode definir a cor do fundo. A cor aparecerá atrás dos elementos html.

Sintaxe

A sintaxe da propriedade cor de fundo é:

Background-Color: cor

No lugar de "cor”, Você pode definir a cor do plano de fundo que deseja aparecer atrás dos elementos.

Exemplo

Primeiro, no arquivo html, criaremos um contêiner usando a tag e depois adicionaremos um título e um parágrafo.

Html

Linuxhint

Bem-vindo ao nosso site

No CSS, ajustaremos a altura da div como “100%”Para fazer parecer em toda a página e tamanho da fonte do texto como“xx-grande”. Depois disso, defina a cor de fundo como “Aqua”.

CSS

div
Altura: 100%;
tamanho de fonte: xx-large;
Background-Color: Aqua;

Na imagem abaixo fornecida, você pode ver que a cor do fundo é aplicada:

Propriedade de imagem de fundo CSS

O "imagem de fundo”A propriedade é usada para definir uma ou mais imagens como um fundo dos elementos HTML. Você pode utilizar esta propriedade para adicionar diferentes imagens de fundo para diferentes elementos.

Sintaxe

A sintaxe da propriedade de imagem de fundo é:

Imagem de fundo: URL ()

Aqui, dê o caminho da imagem que você deseja definir como pano de fundo como um argumento para o “url ()”.

Exemplo

Na continuação do exemplo anterior, adicione uma imagem de fundo no “div" aula. Vamos adicionar o URL da imagem como “URL (IMG.jpg)”:

div
..
Imagem de fundo: URL (IMG.jpg);

A saída abaixo fornecida indica que a imagem de fundo foi adicionada com sucesso:

Observe que a imagem é repetida. Para resolver este problema, consulte a próxima propriedade.

Propriedade de repetição de fundo CSS

Quando você adiciona uma imagem como plano de fundo em uma página da web, ela é repetida por padrão. Para evitar essa repetição e definir o padrão de acordo com sua escolha, o “fundo de repetição”Propriedade é utilizada.

Sintaxe

A sintaxe da propriedade de repetição de fundo é:

Repetir de fundo: repita | repetição-x | repetir-y | sem repetir

A descrição dos valores declarados da propriedade de repetição de fundo é fornecida abaixo:

• repita: É utilizado para repetir a imagem em ambas as direções, vertical e horizontal.
• repetição-x: É usado para definir a repetição da imagem apenas horizontalmente.
• Repita-y: Especifica a repetição vertical da imagem.
• sem repetir: É usado para evitar a repetição da imagem.

Exemplo

Aqui, definiremos o valor da propriedade de repetição de fundo como “sem repetir”:

div
..
Repetição de fundo: sem repetição;

O resultado do código fornecido acima é dado abaixo. Você pode ver que a imagem não está mais repetida:

Propriedade da posição de fundo CSS

Para definir a posição da imagem de fundo, o “posição de fundo”Propriedade é usada. Ele permite ajustar a imagem em diferentes posições, como superior esquerdo, centro esquerdo, inferior esquerdo, superior direito, centro direito e muito mais.

Sintaxe

A sintaxe da propriedade de posição de fundo é:

Posição de fundo: valor

No lugar de "valor”, Você pode especificar a posição da imagem.

Exemplo

Aqui, definiremos a posição de fundo como “Centro”:

div
..
Posição de fundo: centro;

Na saída abaixo, a imagem aparece no centro da página:

Propriedade do tamanho de fundo do CSS

Para definir o tamanho da imagem de fundo, o “tamanho de fundo”Propriedade é usada.

Sintaxe

O size de fundo tem a seguinte sintaxe:

Antecedentes-tamanho: Comprimento | Capa

A seguir, a descrição dos valores da propriedade de tamanho de fundo:

• comprimento: É usado para corrigir a largura e a altura da imagem de fundo.
• cobrir: É utilizado para ajustar a imagem de fundo em todo o fundo.

Exemplo

Vamos definir o tamanho do fundo como “100%Altura e ““80%" largura:

div
..
Size de fundo: 100% 80%;

Você pode ver que a imagem foi redimensionada com base nas dimensões especificadas:

Propriedade de origem do CSS

O "origem-origem”A propriedade é utilizada para ajustar a área de posicionamento da imagem de fundo. A imagem é ajustada no canto superior esquerdo como padrão.

Sintaxe

A sintaxe da propriedade Origin de fundo é:

Background-Origin: Padding-Box | Border-box | Caixa de conteúdo

Os valores da propriedade de origem de fundo são descritos abaixo:

• caixa de preenchimento: É o valor padrão da propriedade de origem de fundo utilizada para ajustar a posição da imagem de fundo de acordo com a borda do preenchimento.
• caixa de fronteira: É usado para definir a imagem de acordo com a caixa de fronteira da imagem.
• caixa de conteúdo: É utilizado para definir a imagem de fundo de acordo com o conteúdo da imagem.

Observação: A propriedade de origem-origin não funciona se o valor da propriedade de atendimento de fundo for definido como “fixo”.

Exemplo

Primeiro, crie uma borda ao redor do recipiente. Aqui, continuaremos o exemplo anterior e definiremos o valor do preenchimento como “10px”. Depois disso, ajuste a largura da borda como “15px", Estilo como"cume”E cor como“RGB (1, 68, 68)”. No final, atribuiremos o valor da propriedade de origem-origin como “caixa de conteúdo”:

div
..
preenchimento: 10px;
borda: 15px Ridge RGB (1, 68, 68);
Origin-Background: Content-Box;

O resultado do código acima fornecido é dado abaixo. Você pode ver que a posição da imagem está definida de acordo com o conteúdo da div:

Propriedade do clipe de fundo CSS

O "clipe de fundo”A propriedade funciona na cor de fundo do elemento. Ele permite controlar até que ponto uma cor de fundo se estende além de um elemento, como o preenchimento do elemento, sua borda e seu conteúdo.

Sintaxe

A sintaxe da propriedade clipe de fundo é:

Origin-Background: Border-box | Caixa de preenchimento | caixa de conteúdo

Os valores da propriedade de origem de fundo são descritos abaixo:

• caixa de fronteira: É o valor padrão da propriedade de origem de fundo usada para definir a cor do fundo atrás da borda.
• caixa de preenchimento: É utilizado para ajustar a cor dentro da caixa de preenchimento do elemento.
• caixa de conteúdo: É usado para definir a cor de fundo de acordo com o conteúdo do elemento.

Exemplo

Continuaremos o exemplo anterior e alteraremos o valor do estilo de fronteira para “pontilhado”Para entender a propriedade clipe de fundo. Depois disso, definiremos o valor da propriedade clipe de fundo como “Caixa de preenchimento”:

div
..
clipe de fundo: caixa de preenchimento;

A saída significa que a cor do fundo branco está aparecendo quando a borda da borda terminou:

Propriedade de Atectamento de Antecedência do CSS

O "Antecipação de fundo”A propriedade é usada para ajustar o comportamento ou a imagem enquanto rola a página. Seu comportamento pode ser definido rolando com outros elementos ou fixos.

Sintaxe

A sintaxe da propriedade de atração de fundo é:

Antecipação de Antecedentes: Valor

Você pode definir o valor do atento de fundo como “fixo”Para consertar a imagem de fundo ou“rolagem”Para permitir que a imagem role com a página.

Observação: Por padrão, o valor da propriedade de atendimento de fundo é definido como “rolagem”.

Pode -se observar que a imagem de fundo adicionada não é estática quando rolamos. Agora vamos corrigir este problema.

Para fazer isso, definimos o valor da propriedade de atimento de fundo como “fixo”:

div
..
Antecipação de fundo: fixado;

Aqui está o resultado demonstrando que a imagem foi corrigida:

Agora, siga em direção à comparação entre as propriedades de segundo plano e a cor de fundo.

CSS Background vs Background-Color

A tabela fornecida diferenciará as propriedades de segundo plano e cor de fundo na base de seus recursos:

Características	CSS Background	CSS Background-Color
Tipo	É uma super propriedade.	É uma subproperta de propriedade de fundo.
Funcionalidade	Ele define todas as propriedades de segundo plano.	Ele define apenas a cor de fundo.
Faixa	Ele suporta todas as propriedades de segundo plano	Ele suporta apenas a propriedade cor de fundo
Nível	Quando você precisa adicionar vários valores de fundo, é fácil de usar. Você pode definir os valores de todas as propriedades de segundo plano.	Pode ser utilizado quando você só precisa adicionar uma única cor de fundo.
Sintaxe	Antecedentes: valores (Os valores são BG-Color, BG-Image e outras propriedades)	Background-Color: cor

Foi explicado como as propriedades da cor de fundo diferem das propriedades de segundo plano.

Conclusão

CSS “fundo”Propriedade é uma propriedade abreviada usada para definir vários valores de segundo plano de uma só vez, como cor, imagem, posição, tamanho, origem e muito mais. Por outro lado, "cor de fundo”É usado apenas para adicionar cor ao fundo. Neste guia, discutimos a diferença entre a propriedade de fundo do CSS e a propriedade CSS Background-Color.