Ir para conteúdo
Fórum Script Brasil
  • 0

Redimensionar Background


DieGo_PaPiTo

Pergunta

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 para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 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 para o comentário
Compartilhar em outros 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 para o comentário
Compartilhar em outros 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 para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...