O Background CSS é uma propriedade do CSS (Cascading Style Sheets) que permite definir a cor ou imagem de fundo de uma página web ou de um elemento HTML específico.
É possível especificar cores, imagens, gradients, entre outros recursos, para criar o visual desejado para o fundo de uma página ou elemento. Além disso, é possível definir como a imagem de fundo se comporta quando o elemento é redimensionado ou quando o conteúdo ultrapassa os limites do elemento.
A propriedade background é muito versátil e permite uma ampla gama de opções para personalizar a aparência do site.
CSS background-color
A propriedade CSS background-color tem como função definir a cor de fundo de um elemento HTML. Dessa forma, é possível especificar a cor em vários formatos, incluindo nomes de cores, valores RGB, valores hexadecimais, entre outros. Assim, o elemento recebe todo a cor de fundo aplicada, incluindo sua área de conteúdo e espaço de preenchimento.
Exemplo:
body {
background-color: lightblue;
}
h1 {
background-color: #FF4500;
}Neste exemplo, o fundo do elemento body é lightblue e o fundo do elemento h1 tem o tom de laranja (#FF4500).
Observação: Se um elemento tiver uma cor de fundo definida e seu elemento pai tiver uma cor de fundo diferente, a cor de fundo do elemento filho será sobreposta à cor de fundo do elemento pai. Além disso, se uma imagem de fundo for definida para um elemento, a propriedade background-color será ignorada, a menos que seja especificada uma cor de fundo de backup para ser usada caso a imagem não esteja disponível.
CSS background-image
A propriedade CSS background-image define uma imagem de fundo para um elemento HTML. Assim, você pode especificar uma imagem em formato JPEG, PNG, GIF, entre outros, ou uma referência a um arquivo de imagem na internet.
Exemplo:
body {
background-image: url('img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
}Neste exemplo, a imagem “img/bg.jpg” tem a característica de definir o fundo do elemento body. Então, a propriedade background-size recebe cover, o que significa que a imagem será esticada para cobrir todo o elemento, sem perder a proporção. A propriedade background-repeat recebe no-repeat, o que significa que a imagem não repete.
Observação: Se uma cor de fundo também for especificada, ela será exibida como uma cor de backup caso a imagem não esteja disponível ou não possa ser carregada. Além disso, é importante lembrar que imagens de fundo podem afetar o desempenho da página, especialmente se forem muito grandes ou se houver muitas imagens na página. Portanto, é uma boa prática otimizar as imagens antes de usá-las como fundo.
CSS Background Image Repeat
A propriedade CSS background-repeat controla se a imagem de fundo de um elemento HTML deve repetir ou não. Dessa forma, se a imagem for maior que o elemento, a propriedade background-repeat determina se a imagem repete na horizontal, na vertical, em ambos os sentidos ou não terar repetição.
Exemplo:
body {
background-image: url('img/bg-pattern.png');
background-repeat: repeat;
}
header {
background-image: url('img/bg-header.jpg');
background-repeat: no-repeat;
}Neste exemplo, o fundo do elemento body recebe uma imagem “img/bg-pattern.png” repetida em ambos os sentidos (horizontal e vertical). Já o fundo do elemento header recebe uma imagem “img/bg-header.jpg” que não repetirá.
Observação: A propriedade background-repeat pode ser combinada com outras propriedades de imagem de fundo, como background-position e background-size, para criar um visual personalizado para a imagem de fundo. Além disso, é importante lembrar que imagens repetidas podem afetar o desempenho da página, especialmente se forem muito grandes ou se houver muitas imagens na página. Portanto, é uma boa prática otimizar as imagens antes de usá-las como fundo.
Backgrounds que combinam com background-repeat
A propriedade CSS background-repeat: no-repeat tem como função indicar que a imagem de fundo de um elemento HTML não deve repetir. Assim, a propriedade background-position define a posição da imagem de fundo em relação ao elemento. E a propriedade background-size define o tamanho da imagem de fundo em relação ao elemento.
Exemplo:
header {
background-image: url('img/header-bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}Neste exemplo, o fundo do elemento header recebe a imagem “img/header-bg.jpg”. A propriedade background-repeat recebe no-repeat, o que significa que a imagem não repetirá. Dessa forma A propriedade background-position recebe o valor center, o que significa que a imagem será centralizada no elemento. E assim, a propriedade background-size recebe o valor cover, o que significa que a imagem será esticada para cobrir todo o elemento, sem perder a proporção.
Observação: É importante lembrar que a propriedade background-position pode ser especificada com valores absolutos (em pixels) ou relativos (em porcentagem ou com palavras-chave como center). Além disso, a combinação de diferentes valores de background-position e background-size permite criar imagens de fundo personalizadas e de alta qualidade.
CSS background-attachment
A propriedade CSS background-attachment tem como função definir se a imagem de fundo de um elemento HTML deve ser fixa ou rolar junto com o resto da página.
Exemplo:
body {
background-image: url('img/bg-pattern.png');
background-attachment: scroll;
}
header {
background-image: url('img/header-bg.jpg');
background-attachment: fixed;
}Neste exemplo, o fundo do elemento body recebe uma imagem “img/bg-pattern.png” e a propriedade background-attachment tem o valor scroll, o que significa que a imagem rolará junto com o resto da página. Então, o fundo do elemento header recebe uma imagem “img/header-bg.jpg” e a propriedade background-attachment tem o valor fixed, o que significa que a imagem ficará fixa na tela e não rolará junto com o resto da página.
Observação: A propriedade background-attachment: fixed pode ser útil para criar efeitos de paralaxe ou para manter uma imagem de fundo fixa mesmo que o conteúdo da página seja rolado. No entanto, é importante lembrar que imagens fixas podem afetar o desempenho da página, especialmente se forem muito grandes ou se houver muitas imagens na página. Portanto, é uma boa prática otimizar as imagens antes de usá-las como fundo.
CSS background – Forma abreviada
A propriedade CSS background é uma forma abreviada de definir todas as propriedades de fundo de um elemento HTML de uma só vez. Assim, a forma abreviada permite que você defina todas as propriedades de fundo (cor, imagem, repetição, posição e anexo) em uma única linha, economizando tempo e tornando o código mais conciso.
Exemplo:
header {
background: url('img/header-bg.jpg') no-repeat center fixed;
}
body {
background: #f2f2f2 url('img/bg-pattern.png') repeat scroll;
}Neste exemplo, o fundo do elemento header é definido como uma imagem “img/header-bg.jpg” que não será repetida, estará centralizada e será fixa. Já o fundo do elemento body é definido como uma cor #f2f2f2 e uma imagem “img/bg-pattern.png” que será repetida e rolará junto com o resto da página.
Observação: Ao usar a forma abreviada da propriedade background, as propriedades são definidas na seguinte ordem: cor, imagem, repetição, posição e anexo. Se você omitir alguma propriedade, o valor padrão será usado. Por exemplo, se você omitir a cor, a cor padrão (transparente) será usada. Além disso, é importante lembrar que a forma abreviada pode ser útil para tornar o código mais conciso, mas pode tornar o código menos legível se você tiver muitas propriedades de fundo definidas.
Ordem da abreviação
A ordem da abreviação da propriedade CSS background é a seguinte:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Exemplo:
body {
background: #f2f2f2 url('img/bg-pattern.png') repeat scroll center;
}Neste exemplo, a cor de fundo é definida como #f2f2f2, a imagem de fundo é definida como url(‘img/bg-pattern.png’), a repetição de fundo é definida como repeat, a posição de fundo é definida como center e o anexo de fundo é definido como scroll.
Veja também:
Estrutura Básica Do HTML
Introdução rápida sobre Python
Introdução rápida sobre JavaScript
Passo a passo de como funciona a internet
JavaScript: acelere seu site Usando a Tag script
Mapa mental para fixar assunto
Conclusão
Em resumo, a propriedade CSS background é uma maneira de definir as propriedades de fundo de um elemento HTML de uma só vez. É uma forma abreviada que permite definir a cor, imagem, repetição, posição e anexo do fundo em uma única linha, tornando o código mais conciso.
Além disso, é importante conhecer a ordem da abreviação da propriedade background, que é: cor de fundo, imagem de fundo, repetição de fundo, posição de fundo e anexo de fundo.
Ao usar a forma abreviada, é importante lembrar que o valor padrão será usado se você omitir alguma propriedade. Ao final, a propriedade CSS background é uma ferramenta poderosa e versátil para definir a aparência dos elementos da página.
Então é isso, bons estudo e bora para próximo artigo do tutorial. Espero você!
Veja o primeiro artigo do Tutorial: Introdução rápida sobre CSS
Perguntas frequentes
A propriedade CSS background é uma maneira de definir as propriedades de fundo de um elemento HTML, incluindo a cor, imagem, repetição, posição e anexo.
A forma abreviada da propriedade CSS background permite definir todas as propriedades de fundo em uma única linha, tornando o código mais conciso e fácil de gerenciar.
A ordem da abreviação da propriedade CSS background é: cor de fundo, imagem de fundo, repetição de fundo, posição de fundo e anexo de fundo.
Se você omitir uma propriedade ao usar a forma abreviada da propriedade CSS background, o valor padrão será usado para essa propriedade.
Aprender sobre a propriedade CSS background é importante porque ela permite que você defina a aparência dos elementos da página, o que é fundamental para criar designs atraentes e interativos para seus sites. Conhecer esta propriedade é uma parte importante do processo de desenvolvimento de páginas da web.