Note: Chào mừng bạn đến với Cntt-k3.com. Hãy Đăng ký thành viên hoặc Đăng nhập để có thể tham gia cùng Cntt-k3 nhá !

Você não está conectado. Conecte-se ou registre-se

Web Tech  »  Programação » Web Development - Tutoriais & Dicas » CSS » Código para background HTML e CSS

Código para background HTML e CSS

Ir para baixo  Mensagem [Página 1 de 1]

1Código para background HTML e CSS Empty Código para background HTML e CSS Ter Nov 25, 2014 12:56 pm

Wh0s

Wh0s
Administrador

A propriedade background

A propriedade Background permite que você controle a cor do plano de fundo de um elemento, configure uma imagem como plano de fundo, e posicione uma imagem em uma página.
As principais propriedades de estilização de um plano de fundo são:
PropriedadeDescriçãoValores
backgroundPropriedade para configurar todas as propriedades do plano de fundo em uma declaraçãobackground-color, background-image, background-repeat background-attachment, background-position
background-attachmentEspecifica se uma imagem de plano de fundo é fixa ou rola com o resto da páginascroll, fixed
background-colorConfigura a cor do plano de fundo de um elemento.color-rgb, color-hex, color-name, transparent
background-imageConfigura uma imagem como plano de fundo.url, none
background-positionConfigura a posição inicial de uma imagem de plano de fundo.top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos.
background-repeatEstabelece se uma imagem de plano de fundo será repetida ou não.repeat, repeat-x, reapeat-y, no-repeat

No nosso exemplo, vamos escolher uma imagem aleatória e a usaremos como plano de fundo e aplicaremos todos os estilos nela.
Primeiro vamos criar o nosso documento HTML, bem simples só com uma div que será a div que irá receber a imagem.
Listagem 1: página HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
Código:
<!DOCTYPE HTML>
Código:
<html lang=
Código:
"pt-br"
Código:
>
Código:
<head>
  
Código:
<meta charset=
Código:
"UTF-8"
Código:
>
    
Código:
<title>Propriedades de background em CSS - Linha de Código</title>
     
Código:
<!-- Aqui chamamos o nosso arquivo css externo -->
    
Código:
<link rel=
Código:
"stylesheet"

Código:
type=
Código:
"text/css"
 
Código:
href=
Código:
"estilo.css"

Código:
/>
Código:
</head>
Código:
<body>
    
Código:
<div id=
Código:
"teste"
Código:
>
    
Código:
</div>
Código:
</body>
Código:
</html>


Agora vamos começar a aplicar os efeitos css. Background-color Primeiro vamos utilizar o background-color, para aplicar uma cor ao fundo do nosso site. Listagem 2: background-color
1
2
3
Código:
body{
    
Código:
background-color:

Código:
#082767;
Código:
}


Lembrando que as cores podem ser escolhidas pelo nome da cor em inglês, pela tabela de cores rgb e também pela tabela de cores hexadecimais.
Tendo a nossa cor de fundo definida, precisamos agora inserir a nossa imagem como plano de fundo da div, para isso vamos utilizar o background-image, como podemos ver a seguir:

Background-image

Nota: Vamos definir um tamanho de 400x de largura e 300px de altura para a nossa div para que possamos demonstrar os efeitos que queremos.
Listagem 3: background-image
1
2
3
4
5
Código:
#teste{
    
Código:
width: 400px;
    
Código:
height: 300px;
    
Código:
background-image: url(logolc.png);
Código:
}


Até agora usamos duas propriedades de background, vamos ver como está ficando o nosso tutorial?

https://webtech.forumeiro.com

Ir para o topo  Mensagem [Página 1 de 1]

Web Tech  »  Programação » Web Development - Tutoriais & Dicas » CSS » Código para background HTML e CSS

Permissões neste sub-fórum
Não podes responder a tópicos