Jump to content
Fórum Script Brasil
  • 0

Redimensionar Background


DieGo_PaPiTo
 Share

Question

Gostaria de saber se tem como redimensionar a imagem colocada como background, de acordo com o navegador.

por exemplo, coloquei uma imagem de fundo da página, mas ou ela corta os detalhes ou eu diminuo a imagem mas ai ela aparece mais de uma vez na tela.

Tem como usar um código pra redimensionar do tamanho certo do navegador?

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Gostaria de saber se tem como redimensionar a imagem colocada como background, de acordo com o navegador.

por exemplo, coloquei uma imagem de fundo da página, mas ou ela corta os detalhes ou eu diminuo a imagem mas ai ela aparece mais de uma vez na tela.

Tem como usar um código pra redimensionar do tamanho certo do navegador?

bom cara.. não sei se tem como redimensionar.. pra falar a verdade, tb to precisando saber isso... mas.. da pra voce deixar a imagem menor, sem aparecer outra...

basta usar o "background-repeat: no-repeat;"

espero ter ajudado

Link to comment
Share on other sites

  • 0

Dá pra fazer usando java script:

<script language="JavaScript" type="text/javascript">
switch (screen.width) {
    case 800:
        document.body.style.backgroundImage = "url(imagens/anjo.jpg)";
        break;
    case 1024:
        document.body.style.backgroundImage = "url(imagens/anjo2.jpg)";
        break;
}
</script>

Link to comment
Share on other sites

  • 0
Guest carlosband

usando CSS fica fácil, só tome cuidado pra imagem não ser muito grande e ficar pesada, melhor usar um .jpg pequeno e redimensioná-lo pra maior do que o contrario.

eis um exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>teste background</title>

<style>

html{

height: 100%;

}

body{

background-color: transparent;

margin: 0px;

padding: 0px;

height: 100%;

z-index:0;

position:relative;

}

img#bg{

height: 100%;

width: 100%;

z-index: -1;

position:absolute;

}

</style>

</head>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.1k
    • Total Posts
      647.1k
×
×
  • Create New...