Fundo CSS vs cor de fundo

e depois adicionar um título e um parágrafo.

HTML

< div >

< h1 > LinuxHint < / h1 >

< p > Bem-vindo ao nosso site < / p >

< / div >

Em CSS, vamos ajustar a altura da div como “ 100% ” para que apareça em toda a página e o tamanho da fonte do texto como “ xx-grande ”. Depois disso, defina a cor de fundo como “ aqua ”.

CSS

div {

altura : 100% ;

tamanho da fonte : xx-grande ;

cor de fundo : aqua ;

}

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

Propriedade de imagem de fundo CSS

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

Sintaxe

A sintaxe da propriedade background-image é:

imagem de fundo: url()

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

Exemplo

Na continuação do exemplo anterior, adicione uma imagem de fundo no ' div ' classe. Vamos adicionar a url da imagem como “ url(img.jpg) ”:

div {

...

imagem de fundo : URL ( img.jpg ) ;

}

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

Observe que a imagem é repetida. Para resolver esse problema, confira a próxima propriedade.

Propriedade CSS background-repeat

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 background-repeat é:

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

A descrição dos valores declarados da propriedade background-repeat é fornecida abaixo:

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

Exemplo

Aqui, vamos definir o valor da propriedade background-repeat como “ sem repetição ”:

div {

...

fundo de repetição : sem repetição ;

}

O resultado do código fornecido acima é fornecido abaixo. Você pode ver que a imagem não se repete mais:

Propriedade CSS background-position

Para definir a posição da imagem de fundo, o botão “ posição de fundo ” propriedade é usada. Ele permite que você ajuste 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 background-position é:

posição de fundo : valor

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

Exemplo

Aqui, vamos definir 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 CSS background-size

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

Sintaxe

Background-size tem a seguinte sintaxe:

tamanho de fundo : comprimento|capa

Segue a descrição dos valores da propriedade background-size:

• comprimento: É usado para fixar 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 plano de fundo como “ 100% ” altura e “ 80% ' largura:

div {

...

tamanho de fundo : 100% 80% ;

}

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

Propriedade CSS background-origin

O ' origem de fundo ” é 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 background-origin é:

origem de fundo : caixa de enchimento | caixa de borda | caixa de conteúdo

Os valores da propriedade background-origin estão descritos abaixo:

• caixa de preenchimento: É o valor padrão da propriedade background-origin utilizada para ajustar a posição da imagem de fundo de acordo com a borda de preenchimento.
• caixa de borda: É usado para definir a imagem de acordo com a caixa de borda 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 background-origin não funciona se o valor da propriedade background-attachment for definido como “ fixo ”.

Exemplo

Primeiro, crie uma borda ao redor do contêiner. Aqui, continuaremos o exemplo anterior e definiremos o valor de preenchimento como “ 10px ”. Depois disso, ajuste a largura da borda como “ 15px ”, estilo como “ cume ” e colorir como “ rgb(1, 68, 68) ”. No final, atribuiremos o valor da propriedade background-origin como “ caixa de conteúdo ”:

div {

...

preenchimento : 10px ;

fronteira : 15px cume rgb ( 1 , 68 , 68 ) ;

origem de fundo : caixa de conteúdo ;

}

O resultado do código fornecido acima é fornecido 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 ” 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 background-clip é:

origem de fundo : caixa de borda | caixa de enchimento | caixa de conteúdo

Os valores da propriedade background-origin estão descritos abaixo:

• caixa de borda: É o valor padrão da propriedade background-origin usada para definir a cor de 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 da borda para “ pontilhado ” para entender a propriedade background-clip. Depois disso, definiremos o valor da propriedade background-clip como “ caixa de estofamento ”:

div {

...

clipe de fundo : caixa de estofamento ;

}

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

Propriedade CSS background-attachment

O ' anexo de fundo ” é usada para ajustar o comportamento ou a imagem ao rolar a página. Seu comportamento pode ser definido rolando com outros elementos ou fixo.

Sintaxe

A sintaxe da propriedade background-attachment é:

anexo de fundo : valor

Você pode definir o valor de background-attachment como “ fixo ” para corrigir 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 background-attachment é definido como “ rolagem ”.

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

Para isso, definimos o valor da propriedade background-attachment como “ fixo ”:

div {

...

anexo de fundo : fixo ;

}

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

Agora, vá para a comparação entre as propriedades de fundo e cor de fundo.

Fundo CSS vs cor de fundo

A tabela fornecida diferenciará as propriedades de fundo e cor de fundo com base em seus recursos:

Características	Plano de fundo CSS	cor de fundo CSS
Modelo	É uma super propriedade.	É uma subpropriedade da propriedade background.
Funcionalidade	Ele define todas as propriedades do plano de fundo.	Ele define apenas a cor de fundo.
Variar	Ele suporta todas as propriedades de fundo	Ele suporta apenas a propriedade de cor de fundo
Nível	Quando você precisa adicionar vários valores de plano de fundo, é fácil de usar. Você pode definir os valores de todas as propriedades do plano de fundo de uma só vez.	Ele pode ser utilizado quando você só precisa adicionar uma única cor de fundo.
Sintaxe	fundo: valores (Os valores são bg-color, bg-image e outras propriedades)	cor de fundo: cor

Foi explicado como as propriedades de cor de fundo diferem das propriedades de fundo.

Conclusão

CSS “ fundo ” é uma propriedade abreviada usada para definir vários valores de plano de fundo 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 plano de fundo. Neste guia, discutimos a diferença entre a propriedade CSS background e a propriedade CSS background-color.