Background

Background-repeat

A propriedade background-repeat define se e como a imagem de fundo será repetida. As opções mais comuns são:

• repeat: repete a imagem tanto horizontalmente quanto verticalmente (padrão).
• no-repeat: não repete a imagem.
• repeat-x: repete a imagem apenas horizontalmente.
• repeat-y: repete a imagem apenas verticalmente.

Exemplo de código:

    <style>
        div {
            background-image: url('imagens/exemplo.jpg');
            background-repeat: no-repeat;
        }
    </style>
                

Shorthand de Background

A propriedade background é uma forma abreviada de definir várias propriedades de fundo em uma única linha. A ordem das propriedades no shorthand é importante e deve seguir a seguinte sequência:

1. background-color
2. background-image
3. background-position
4. background-size (deve ser precedido por uma barra "/")
5. background-repeat
6. background-attachment
7. background-origin (opcional)
8. background-clip (opcional)

Exemplo de código:

            <style>
                div {
                    background: #000 url('imagens/exemplo.jpg') center/cover no-repeat fixed;
                }
            </style>
                

O exemplo acima define a cor de fundo como preta, a imagem de fundo como 'exemplo.jpg', posicionada no centro, redimensionada para cobrir o elemento, sem repetição, e fixa em relação à janela do navegador.

Background-origin

A propriedade background-origin especifica a área de posicionamento da imagem de fundo. Ela define a origem da imagem de fundo dentro do elemento. Os valores possíveis são:

• border-box: A imagem de fundo começa a partir da borda do elemento.
• padding-box: A imagem de fundo começa a partir da borda interna do padding do elemento.
• content-box: A imagem de fundo começa a partir da borda do conteúdo do elemento.

Exemplo de código:

    <style>
        .origin-example {
            width: 200px;
            height: 200px;
            border: 10px solid black;
            padding: 20px;
            background-image: url('imagens/exemplo.jpg');
            background-origin: border-box;
            background-size: cover;
        }
    </style>
                

Background-clip

A propriedade background-clip define até onde a imagem de fundo ou a cor de fundo deve se estender dentro do elemento. Os valores possíveis são:

• border-box: A imagem de fundo ou a cor de fundo se estende até a borda do elemento.
• padding-box: A imagem de fundo ou a cor de fundo se estende até a borda interna do padding do elemento.
• content-box: A imagem de fundo ou a cor de fundo se estende até a borda do conteúdo do elemento.

Exemplo de código:

    <style>
        .clip-example {
            width: 200px;
            height: 200px;
            border: 10px solid black;
            padding: 20px;
            background-image: url('imagens/exemplo.jpg');
            background-clip: border-box;
            background-size: cover;
        }
    </style>
    box-sizing:content-box;
    width: 200px;
    height: 200px;
    border: solid 20px black;
    padding: 20px;
    background-image: url('imagens/exemplo1.jpg');
    background-clip: padding-box;
    background-size: cover;
                

Linear Gradient

O efeito linear segue uma linha reta, podendo ser direcionado em diferentes ângulos. Utilizamos graus para definir a direção do início e do fim do efeito.

Exemplo:

O comando:

    <style>
        div {
            background-image: linear-gradient(90deg, #f00, #0f0);
        }
    </style>
                

É possível adicionar mais de duas cores ao efeito.

Radial Gradient

O efeito radial parte do centro da imagem para as extremidades, criando um efeito circular.

Exemplo:

O comando:

background-image: radial-gradient(circle, #00f, #0f0);

Ocupação por Percentagem

É possível definir a porcentagem que cada cor ocupa antes de iniciar o degradê. Veja no exemplo abaixo a cor verde ocupando 50% do espaço.

Exemplo:

O comando:

background-image: linear-gradient(90deg, #0f0 50%, #f0f, #00f);

Também é possível definir em qual trecho do bloco iniciará a transição da cor. Para isso, o percentual deve ficar entre vírgulas e entre as cores escolhidas.

Exemplo:

O comando:

background-image: linear-gradient(90deg, #f00 29%, 30%, #0f0 31%, 49%, #00f 50%);

• background-image: Propriedade CSS usada para definir uma imagem de fundo para um elemento.
• linear-gradient(90deg, ...): Função CSS que cria uma transição gradual entre duas ou mais cores ao longo de uma linha reta. O parâmetro 90deg especifica a direção do gradiente (90 graus, ou seja, da esquerda para a direita).
• #f00 29%: Cor vermelha (hexadecimal #f00) que ocupa até 29% do gradiente.
• 30%: Ponto de transição sem cor definida, que será interpolada automaticamente pelo navegador entre as cores adjacentes.
• #0f0 31%: Cor verde (hexadecimal #0f0) que começa a partir de 31% do gradiente.
• 49%: Outro ponto de transição sem cor definida, interpolado automaticamente.
• #00f 50%: Cor azul (hexadecimal #00f) que começa a partir de 50% do gradiente.

background-image: linear-gradient
(
, 
 
, 
,
 
,
,
 
);