Vídeo: Curso Essencial Adobe Dreamweaver CC 2017 - Aula 35 Regras e Propriedades de CSS 2024
Usando o painel de fundo no painel do CSS Designer do Dreamweaver, você pode especificar uma cor de fundo ou imagem para um estilo - e controlar como o fundo é exibido na página. Você pode usar as configurações de estilo de fundo para qualquer elemento da sua página da Web que pode exibir um plano de fundo - incluindo as etiquetas, o título e a imagem.
Por exemplo, você pode alterar a etiqueta para incluir configurações de fundo que se aplicam a toda a página, ou você pode criar um estilo com a classe ou seletor ID e especificar um plano de fundo que aparece apenas por trás de um indivíduo tag.
Ao incluir o plano de fundo na classe ou o estilo ID de uma etiqueta, você pode limitar o plano de fundo para aparecer na tela somente onde a etiqueta é usada. Observe que a opção Antecedentes funciona apenas com uma imagem se você definir primeiro uma margem em torno da imagem.
Você pode escolher entre essas opções de plano de fundo:
-
Cor de plano de fundo: Especifique a cor de fundo de um estilo definido usando um dos vários métodos. Você pode clicar bem na cor e selecionar uma cor predefinida ou criar uma cor personalizada. Ou use o conta-gotas para provar qualquer cor na tela. Finalmente, você pode inserir um código de cores hexadecimal - certifique-se de incluir o #, como em # 000000 para a cor preta ou #ffffff para a cor branca.
-
Imagem de fundo: Selecione uma imagem para servir como plano de fundo na definição do estilo. Digite qualquer URL para uma imagem no seu computador ou na Internet, ou clique no ícone da pasta para navegar no disco rígido e selecione uma imagem.
-
Posição de fundo: Especifique a posição da imagem de plano de fundo a partir da parte esquerda e superior do elemento pai, digitando um número em cada campo. Esta opção é visível apenas se você clicar na seta pequena ao lado do campo URL na seção Fundo para revelar os campos adicionais que se seguem.
-
Tamanho: Selecione a medição em pixels, ems ou outra opção e, em seguida, insira o tamanho desejado para o plano de fundo. Deixando o campo Tamanho definido como automático (o padrão) exibe a imagem no tamanho real.
-
Background-clip: Especifique se o fundo começa a borda, o preenchimento ou o conteúdo de um elemento de caixa, como uma etiqueta.
-
Background-Repeat: Clique no ícone correspondente para especificar como e se a imagem de fundo se repete, ou telhas, em toda e para baixo da página. Telão de imagens de fundo por padrão, então você deve escolher uma opção se você não deseja que o seu fundo seja repetido ou você deseja especificar como ele se repete.
Observe também que, se a imagem for maior do que o elemento ao qual ela é aplicada, somente a imagem que caberá na área de exibição do elemento será visível.Por exemplo, se você usar uma imagem de 600 pixels de largura como o plano de fundo de uma etiqueta que esteja definida para 300 pixels de largura, apenas metade da imagem será visível.
As opções de repetição, listadas na ordem da aparência de seus ícones, seguem:
-
Herdar: A menos que outra opção seja selecionada, cada elemento herda o comportamento do elemento pai. Esta opção padrão não precisa ser especificada.
-
Repetir: A imagem de fundo se repete verticalmente e horizontalmente no fundo do elemento.
-
Repeat-X: O fundo se repete horizontalmente, mas não verticalmente, no fundo do elemento.
-
Repeat-Y: O fundo se repete verticalmente, mas não horizontalmente, no fundo do elemento.
-
Não-Repetir: O plano de fundo é exibido uma vez no canto superior esquerdo do elemento.
-
Origem: Especifique se a origem do fundo começa na borda, o preenchimento ou o conteúdo de um elemento de caixa, como uma etiqueta.
-
-
Anexo: Determine como o plano de fundo se comporta quando a página é roteada. As opções são
-
Herdar: A menos que outra opção seja selecionada, cada elemento herda o comportamento do elemento pai. Esta é uma opção padrão e não precisa ser especificada.
-
Corrigido: O fundo permanece colado em um lugar na área de visualização e não se desloca para fora da vista, mesmo quando a página da Web está rolando.
-
Scroll: O fundo rola junto com a página da Web.
-
-
Gradiente: Clique na cor bem ao lado de Gradiente para abrir o novo seletor de gradiente visual do Dreamweaver.