Tamanho de imagem em CSS

Kandalf

Power Member
Eu estou a construir um site e tenho uma imagem de fundo e gostava de saber se é possível fazer com que ela mude de tamanho conforme o tamanho da da janela do utilizador. Se não fosse uma imagem acho que era fácil mas sendo imagem não tou a ver se é possível fazer isto
 
Conforme a resolução ou a janela mesmo?

Senão seria algo do género

img (ou uma classe para isso .X)
{
width:90%;
height:90%;
}

Percentagens à toa.. mas acho que deu para entender.. senão é o que queres, peço desculpa :)

Mas aqueles dois campos dão para definir o tamanho da imagem, agora se for quando se faz resize mesmo da janela, se calhar tens que usar javascript para o evento de resize..

Cumps
 
Eu percebo muito pouco disto e não estou a perceber bem mas é assim eu tenho isto

Código:
body {
    background-color: #000000;
    color: #00FF33;
    background-image: url(images/body_bg.jpg);    
    background-repeat: repeat-y;
    background-position: center;
    background-attachment: fixed;

    }

e aquela imagem "body_bg.jpg" tem um tamanho e eu queria que esse tamanho mudasse conforme o tamanho da janela.
 
Eu percebo muito pouco disto e não estou a perceber bem mas é assim eu tenho isto

Código:
body {
    background-color: #000000;
    color: #00FF33;
    background-image: url(images/body_bg.jpg);    
    background-repeat: repeat-y;
    background-position: center;
    background-attachment: fixed;

    }
e aquela imagem "body_bg.jpg" tem um tamanho e eu queria que esse tamanho mudasse conforme o tamanho da janela.

Boas,

mas tu já la tens o repeat-y que deveria fazer precisamente isso (y = vertical, para a horizontal usas repeat-x;)

Ou nao é isso que pretendes?
 
Bem acho que não é bem isso eu tenho uma imagem e queria que o tamanho dela mudasse dependendo do tamanho da janela.

Nota: o body_gb.jpg é uma imagem com 1206 x 12 e a cor nas bordas e diferente de no centro e quando estou a ver isto num monitor com muita resoluçao e uma janela grande a maior que os 1206 as partes de lado ficam pretas que é a cor do fundo eu queria que tipo a imagem estica-se mas secalhar não é possivel
 
Secalhar esticando nao vai ficar com o efeito que desejas, nao sei..

Porque nao mudares a cor do fundo para uma cor q fique bem?
 
Dá uma olhada neste exemplo. Foi feito com uma tabela mas pode igualmente ser realizado com a ajuda de divs.
As imagens estao aqui:
esquerda.jpg - http://img505.imageshack.us/img505/3213/esquerdaoy9.jpg
direita.jpg - http://img505.imageshack.us/img505/6105/direitaiq9.jpg
meio.jpg - http://img409.imageshack.us/img409/6445/meiokx2.jpg
blank.gif - uma imagem tranparente com 1x1 px


Código:
<HTML>
<HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
  <TITLE></TITLE>
  <META NAME="description" CONTENT="">
  <META NAME="keywords" CONTENT="">
</HEAD>
<BODY>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" SUMMARY="">
    <TR>
        <TD style="background-image: url(esquerda.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
        <TD style="background-image: url(meio.jpg); background-repeat: repeat-x; width: 100%;"></TD>
        <TD style="background-image: url(direita.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
    </TR>
    <TR>
        <TD style="background-color: black;">&nbsp;</TD>
        <TD style="background-color: black;">&nbsp;</TD>
        <TD style="background-color: black;">&nbsp;</TD>
    </TR>
    <TR>
        <TD style="background-image: url(esquerda.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
        <TD style="background-image: url(meio.jpg); background-repeat: repeat-x; width: 100%;"></TD>
        <TD style="background-image: url(direita.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
    </TR>
</TABLE>
</BODY>
</HTML>
 
Dá uma olhada neste exemplo. Foi feito com uma tabela mas pode igualmente ser realizado com a ajuda de divs.
As imagens estao aqui:
esquerda.jpg - http://img505.imageshack.us/img505/3213/esquerdaoy9.jpg
direita.jpg - http://img505.imageshack.us/img505/6105/direitaiq9.jpg
meio.jpg - http://img409.imageshack.us/img409/6445/meiokx2.jpg
blank.gif - uma imagem tranparente com 1x1 px


Código:
<HTML>
<HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
  <TITLE></TITLE>
  <META NAME="description" CONTENT="">
  <META NAME="keywords" CONTENT="">
</HEAD>
<BODY>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" SUMMARY="">
    <TR>
        <TD style="background-image: url(esquerda.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
        <TD style="background-image: url(meio.jpg); background-repeat: repeat-x; width: 100%;"></TD>
        <TD style="background-image: url(direita.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
    </TR>
    <TR>
        <TD style="background-color: black;">&nbsp;</TD>
        <TD style="background-color: black;">&nbsp;</TD>
        <TD style="background-color: black;">&nbsp;</TD>
    </TR>
    <TR>
        <TD style="background-image: url(esquerda.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
        <TD style="background-image: url(meio.jpg); background-repeat: repeat-x; width: 100%;"></TD>
        <TD style="background-image: url(direita.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
    </TR>
</TABLE>
</BODY>
</HTML>

Tables hoje em dia ? Não.

A tua imagem já tem uma width especifica, logo não vejo o porque do 'repeat-x'.

Na minha opinião deves começar a construir o layout com uma div centrada horizontalmente e sem repeat.

Vai a este site: http://www.glish.com/css/3.asp e começa a construir o teu layout apartir deste, é um bom ponto de partida para quem quer aprender.
 
Back
Topo