TUTORIAL Colocando fundo no seu blog

Colocar imagens como plano de fundo nos sites é uma coisa simples de fazer, basta colocar o código background-image: url(Url da Imagem); onde você deseja colocar a imagem de fundo, lembre-se qualquer parte do CSS pode ter sua imagem de fundo e não somente a tag body onde é geralmente usada. Todas essas alterações de imagens de fundo são feitas através da página editar HTML.

Mas além de colocar a imagem ainda podemos escolher onde ela aparecerá e se irá ou não se repetir. Então vamos por partes, primeiro sobre a imagem se repetir, aqui temos algumas opções, embaixo da linha background-image: url(Url da Imagem); colocamos:

background-repeat: no-repeat; - imagem aparece somente uma vez
background-repeat: repeat-x; - imagem repete horizontalmente(lado a lado)
background-repeat: repeat-y; - imagem repete verticalmente(uma embaixo da outra)

Um detalhe é que o ponto e virgula faz parte do código portanto não esqueça dele.
Além de repetir ou não podemos escolher a posição que a imagem de fundo irá aparecer, com o seguinte código:
background-position: right top;

Isto somente fará diferença no blog caso você coloque uma das linhas que controla a repetição, afinal se a imagem se repetir pela pagina toda ela não usará posicionamento. Para colocar a imagem no lugar que você deseja basta trocar as palavras right e top, assim você mudará o lugar que a imagem de fundo irá aparecer para fazer isto no lugar de right(direita), você pode usar center(imagem centralizada horizontalmente) ou left(imagem à esquerda). E no lugar de top(imagem no alto da tela), pode usar center(imagem centralizada verticalmente) ou bottom(imagem embaixo da tela).

Esses códigos para controlar a repetição e onde a imagem de fundo aparecerá são muito bons para usar quando deixamos a imagem de fundo fixa, acrescentando essa linha:
background-attachment: fixed;

Isto faz que a imagem de fundo fique parada na tela e o conteúdo do site deslize sobre ela. Todos esses códigos mencionados nesta publicação são usados para controlar a imagem no fundo da pagina e portanto devem ser usados juntos, deste jeito:
body {background-image: url(Url da Imagem);
background-position: left center;
background-repeat: repeat-x;
background-attachment: fixed}
Clique aqui e veja um exemplo de site com imagem fixa no centro da página

Assuntos relacionados:
Colocar os retirar margens no blog
Onde e como hospedar imagens
Código html das cores para usar nos estilos CSS
Como formatar o texto do blog


Gostou? Então envie para algum amigo!
Link para esta página

Por Daieny Schuttz

Warning: include(../textarea_color.php) [function.include]: failed to open stream: No such file or directory in /home/neocdn/htdocs/tutoriais/page_009.php on line 23

Warning: include() [function.include]: Failed opening '../textarea_color.php' for inclusion (include_path='.:/usr/share/php:/usr/share/pear') in /home/neocdn/htdocs/tutoriais/page_009.php on line 23

Neste Tutorial, você irá aprender como obter a URL das Imagens. URL (Uniform Resource Locator) é o endereço de um recurso na Internet, aqui vamos falar apenas das Imagens. A URL de uma Imagem é usada, principalmente, para inserir a Imagem em uma Página usando HTML. O Código de inserir Imagens é fácil e existem diversos tipos, mas usaremos o mais simples:



Como você pode observar, é necessário ter a URL. É impossível inserir a Imagem em uma Página sem a URL. Se você já conhece o Código e o que falta é apenas a URL, siga os passos abaixo e você terá a URL da Imagem que você quer rapidinho.

1 ) Para facilitar, vamos imaginar uma situação: Precisamos colocar em uma Página uma Imagem de um Pet Cinza. Antes de tudo, precisamos ter essa Imagem. Mas como não temos, devemos procurar uma. Vamos procurar a Imagem no Neopian Times (Claro, pode ser qualquer outro lugar).

2 ) Depois de um tempo, finalmente encontramos uma Imagem de um Pet Cinza no "Short Stories" na Edição 166.

Pronto. Agora nós temos uma Imagem. É um Pobre e Fofo Wocky Cinza:

3 ) E agora? Já conseguimos uma Imagem. Agora vamos pegar a URL dela. É bem fácil: Como a Imagem que queremos é a do Wocky Cinza, vamos clicar com o Botão Direito do Mouse sobre a Imagem desse Wocky Cinza. Aparecerá inúmeras opções, mas você irá clicar em Propriedades.

4 ) Você usa Internet Explorer ou FireFox? Há pequenas difereças entre eles nessa etapa. São difereças extremamente pequenas, mas, para detalhar (mais ainda) vamos demostrar os dois. Abaixo tem o Quarto Passo para os dois:

FireFox
Após clicar em Propriedades, irá aparecer a seguinte Janela:

A nossa Imagem, a do Wocky Cinza contém um Link sobre ela. Mas ignore isso no momento, precisamos apenas da URL. Terá várias Informações sobre a Imagem e o Link, em Imagem, a palavra URL está substituida por Endereço. Vejá abaixo qual é a URL da Imagem do Wocky Cinza, que está circulado de Roxo:

Há um modo mais fácil de pegar a URL no FireFox: Clique com o Botão Direito na Imagem e, depois, clique em Copiar Endereço da Imagem. Agora, prossiga para o Quinto Passo.

Internet Explorer
Depois, irá aparecer as Propriedades da Imagem. Em Endereço (URL) está a URL da Imagem do Wocky Cinza. Veja abaixo, circulado de Roxo:

5 ) Agora, selecione toda a URL, copie e cole no Código de Inserir Imagens. Prontinho. A Imagem do Wocky Cinza estará em sua Página. Você pode fazer isso em qualquer Imagem, não é difícil. Aos poucos você se acostumará e fará isso cada vez mais rápido. O Código com a URL do WOcky Cinza ficará assim:



Se você colocar na Página apenas a URL, sem o Código, aparecerá como um Texto comum. E se você acessar a URL (Copie a URL e cole na Barra de Endereço), você irá abrir a Imagem, porque, como você já sabe, a URL de uma Imagem é o Endereço dela. Para finalizar, abaixo está a Imagem original do Wocky Cinza e, logo depois, a sua URL.

http://images.neopets.com/nt/ntimages/166_wocky_grey.gif
Deixe Um Comentario Nessa Postagem :

0 comentários:

Postar um comentário

Não use palavras de baixo calão. ou pornogafica nos ajude e de sua opinião.