Galeria de imagem com CSS

Colocar imagem de fundo mas com varias opções.

Código:

<style type="text/css">body {
background-image: url(ENDEREÇO DA IMAGEM);
background-position: right;
background-attachment: fixed;
background-repeat: no-repeat;
}</style>

Escolher posição da imagem de fundo:

Substituir :background-position: right;

por:
background-position: top left; (em cima, à esquerda)
background-position: top center; (em cima, no meio)
background-position: top right; (em cima, à direita)
background-position: center left; (ao centro, à esquerda)
background-position: center center; (ao centro, no meio)
background-position: center right; (em cima, à direita)
background-position: bottom left; (em baixo, à esquerda)
background-position: bottom center; (em baixo, ao meio)
background-position: bottom right; (em baixo, à direita)

imagem com link:

Código:

<a href="LINK DE DESTINO" target="_blank"><img src="LINK DA IMAGEM" border="0" alt="DESCRIÇÃO DA IMAGEM"></a>

Imagem transparente:

Código:

<img src="AQUI URL " style="filter:alpha(opacity=50)">

Reflicta a imagem em posição Vertical/ Horizontal

Código:

<img src="AQUI URL " style="filter:flipv">

efeito de noite:

Código:

<img src="AQUI  URL" style="filter:xray()">

Efeito de preto e branco:

Código:

<img src="AQUI  URL" style="filter:gray;">

Efeito de gravadura na imagem:

Código:

<img src="AQUI  URL" style="filter:progid:dximagetransform.microsoft.emboss">

Efeito de realce nas imagem:

Código:

<img src=" AQUI  URL" style="filter:progid:dximagetransform.microsoft.emboss">

EFEITOS À PASSAGEM DO MOUSE

De Preto e Branco para Cor:

Código:

<style type="text/css"> a: AQUI URL {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>

De Cor para Preto e Branco:

Código:

<style type="text/css"> a: AQUI URL {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;} </style>

De normal para reflectida:

Código:

<style type="text/css"> a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>

De reflectida para normal:

Código:

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;} </style>

Colucar imagens próximas:

Código:

<div style="white-space: nowrap;"> <img src="URL IMAGEM"> <img src="URL IMAGEM”"> </div>

Parte Css:

Código:

Código:

<style type="text/css">
.stormgr{padding-top:9px;width:170px; height:300px; background: transparent url(Url);}
.stormgr .storm a {position:relative; left:9px;display:block; height:20px; width:150px; overflow:hidden;text-decoration:none; border:none; border: 1px solid #FFF !important;}
.stormgr .storm a img{ border:none;}
.stormgr .storm a:hover img{filter:alpha(opacity=50); opacity:0.5;}
.stormgr .storm a:hover { height:180px; background-image: url(url); border: 1px dashed Black !important;}
</style>

Parte Html:

Código:

Código:

<div class="stormgr">
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
</div>

Ps: As Imagens devem ter o tamanho conforme os "width" e "height"...

pessoal ajudai.me quero por a imagem do fundo a ocupar a pagina do perfil toda.. dai.me um codigo para me ajudar por favor

dai.me um codigo para por a minha imagem de fundo a ocupar a pagina do perfil toda... pf

Tens Photoshop nandofuck?
a unica solucao para teu problema sao programas de edicao de imagens
redimensiona e depois fazes upload.

nao meu mas deixa.la ent meu

Aranja um photoshop, vai te ajudar muito mesmo. acredite...