Pequenas Dúvidas

  • HTML
  • CSS
  • JS
  • PHP
  • MySQL
  • Marketing Digital
  • Photoshop

CSS plano de fundo (background), quais são as diferenças e como usar?

CSS background

CSS plano de fundo (background), quais são as diferenças e como usar?

O CSS plano de fundo (blackground) é utilizado especifico para colocar uma cor ou imagem de fundo em um ou mais elementos. Quando utilizamos imagens de plano de fundo, também é possível fazer alguns ajustes como, por exemplo, fixando a imagem no fundo ou repetindo-a.

Vamos lá então?

Sintaxes do CSS background:

  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Com a primeira propriedade é possível englobar todas as outras em uma única linha, da seguinte forma:

background: backgrond-color background-image background-repeat background-position;

Exemplo:

#plano {
	background: #069 url(imagens/plano.jpg) left top no-repeat;
}

Ou seja, primeiro eu indico uma cor que deve existir no fundo, seguido de uma imagem que completamente, depois indico o posicionamento dessa imagem e por ultimo se ela deve ou não se repetir.

Vamos ver cada um de forma separada:

background-color

Para adicionar somente cor de fundo a um elemento (tendo ele ou não imagem), use o background-color

background-color:#000;

Essa opção deverá ser preenchida com uma cor em hexadecimal, podendo utilizar três ou seis caracteres.

IMPORTANTE: Para utilizar somente três caracteres é necessário que os pares das três cores (RGB) sejam iguais, por exemplo:

Se eu utilizar a cor: #006699 (veja que os pares do R (Red), G (Green) e B (Blue) são iguais), portanto eu posso “encurtar”, utilizando somente três caracteres: #069.

background-image

Essa opção adiciona uma imagem no plano de fundo de um elemento e ao contrario da opção background, não é possível adicionar em linha o posicionamento e se a imagem deve ou não repetir, pois elas deverão ser adicionadas de forma separada.

background-image:url("plano.jpeg");

background-repeat

Adiciona uma informação de como a imagem deve se comportar, repetindo, não repetindo, acompanhe as opções abaixo:

  • repeat-x: Repete somente no eixo X (largura).
  • repeat-y: Repete somente no eixo Y (altura).
  • repeat: Repente em ambos os eixos.
  • no-repeat: Não repete.

 

background-attachment

Indica se uma imagem deve se manter fixa enquanto todo o conteúdo da página rola ou se a imagem deve rolar com o conteúdo, acompanhe abaixo as opções:

  • scroll: Opção padrão, o plano de fundo rola junto com o conteúdo.
  • fixed: O plano de fundo fica fixo, enquanto o conteúdo rola sobre ele.
  • local: Essa opção é semelhante a opção scroll, o diferencial é a forma como a imagem é enquadrada, podendo ser relativo a forma como a imagem fica fixa.
  • initial: Deixa o valor padrão para essa propriedade (elemento).
  • inherit: Recupera as configurações do elemento anterior (pai).

 

background-position

Determina o posicionamento da imagem com valores pré-fixados ou determinados pelo desenvolvedor, veja abaixo as opções para essa propriedade:

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

Além desses valores pré-fixado, como já mencionado também é possível direcionar a imagem com, por exemplo, valores fixos em pixels, porcentagens, etc, da seguinte forma:

background-position: 5px 10px;

Lembrando que o primeiro indicador sempre será o eixo X (horizontal) e o segundo o eixo Y (vertical).

Dúvidas nos comentários e até a próxima =D.

jan 26, 2015Rodrigo Sarri
CSS opacidade (transparência) em qualquer navegador, como fazer?Tipo de declaração DOCTYPE no HTML:
Comentários: 1
  1. Jameson
    2 years ago

    Excelente!

    RespostaCancelar

Deixe uma resposta Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

7 years ago 1 Comentário CSSbackground, como deixar uma imagem fixa no fundo, css, plano de fundo
Posts recentes
  • Como abrir arquivos php no navegador? 21 de dezembro de 2015
  • Utilizando o F12, a ferramenta do desenvolvedor 7 de dezembro de 2015
  • Como recortar qualquer imagem usando a ferramenta caneta do Photoshop 3 de dezembro de 2015
  • Enviar dados de um formulário sem atualizar a página com JQUERY (ajax) 7 de abril de 2015
  • Separar as palavras de uma frase em PHP 9 de fevereiro de 2015
Categorias
  • Adobe Dreamweaver
  • CSS
  • Dicas
  • facebook
  • HTML
  • JQUERY
  • JS
  • Marketing Digital
  • MySQL
  • Photoshop
  • PHP
  • Sem categoria
Nuvem de tags
phpcssjqueryhtmljavascriptcss3inlinematrizlayoutfacebookfan pagedimensõesstyleimagensremover espaço em brancoclassdreamweaveradobetruqesdicaclasseidpáginacadastrar site no googleimplodeadicionar item de segurança banco de dadosvalidar emailarrayrandacertar horahorário de verãofuso horáriogerar número aleatóriovalidar campos phpmysqlsitemapcomo cadastrar site no buscadorcadastrar site no bingcadastrar site no yahoositemap para videossitemap para imagenscadastro no banco de dados phpsitemap para smartphonesitemap para googlecomo construir um sitemap
Outras postagens
Box-sizing
A utilização do box-sizing
7 years ago
Enviar dados de um formulário sem atualizar a página com JQUERY (ajax)
7 years ago
Matemática
Como funciona a conversão de medidas informáticas?
7 years ago
Buscar
2018 © Pequenas Dúvidas - Aprenda um pouco de HTML CSS JS PHP MySQL e Marketing Digital