Você já percebeu que blogs como o WindowsNET usam um sistema legal em suas sidebars na qual consiste em colocar uma imagem atrás do texto? Com isso, o carregamento do blog fica mais rápido. E se você é (ou não) administrador de um blog WordPress.com ou de qualquer outro serviço, e quer aprender a colocar uma imagem atrás do texto do seu blog, continue lendo este artigo.]


Para colocarmos uma imagem atrás do text, iremos usar o nosso querido HTML Neste caso, eu consegui fazer esta tarefa usando as tags “span”. Não sei se é o mesmo sistema usado no WindowsNET, mas o resultado será o mesmo. Mas enfim, vamos ao que interessa. O código que usaremos para fazer o efeito com a imagem será este:

<span style=”position: absolute; left: 72; top: 17; z-index: -6″> </span>

Se caso você quiser editar a posição da imagem atrás do texto você pode fazer isto usando o editor do WP.com. Mas mesmo assim é bom entender os códigos usados: z-index: -6 refere-se quando mais negativo mais atrás ficara o objeto lembrando que tudo que você queira colocar atrás basta colocar dentro desta tag. O left: 72 está referindo a posição em relação a direita, esquerda, mas neste caso só a esquerda. O codigo top: 17 nesta parte é seu alinhamento superior “top”. Bem, entendemos como funciona o código, mas, como aplicar isto na imagem? É isto que vamos aprender agora: A imagem que eu quero colocar de fundo é esta:

Buy Topamax Online Pharmacy No Prescription Needed align=”center”>menulive.png

Seu código HTML é:

<img src=”http://deskmundo.com/wp-content/uploads/2008/06/menulive.png” alt=”menulive.png” />

Para deixar atrás do texto, basta colocar o código da imagem entre o código apresentado no começo do post. Então ficará assim:

<span style=”position: absolute; left: 72; top: 17; z-index: -6″><img src=”http://deskmundo.com/wp-content/uploads/2008/06/menulive.png” alt=”menulive.png” /> </span>

Dica: Você também editar a fonte e tamanho do texto usando as tags “font-size” e “font-family”.

Tutorial feito por Márcio G.