[Resolvido] Background Cortando Imagem

Ronaldo AmzBr. · Julho 30, 2010

Salve galera do Forum Imasters, realmente é um prazer poder participar dessa rede!!"

Pessoal, por favor me ajudem com o seguinte:

- Crio uma Div para plano de fundo,

- Crio uma Sub Div para inserir conteúdo em texto com um width definido (ex. 450px)

Porém, no momento em que estou visualizando a página no navegador e o redimenciono (navegador) horizontamente inferior aos 450 px, ele gera a barra de rolagem horizontal correto? Até ai tudo bem mas quando ele gera a barra e eu movimento ela, a imagem de fundo é cortada, ficano no lugar um "Branco". Como se o plano de fundo cortasse.

Exemplo do código:

.melao {
background:url(images/imagem.jpg) no-repeat;
height:600px;
width: /* = já deixei em auto, 100%, Sem nada. *Tentei também todas propriedades do background-attachment */
}
.cachorro {
width:450px;
}

ME AJUDEM AI POR FAVOR, Valeu e Abraços.

rogerio de paulo · Julho 30, 2010

E ai meu irmão

Voce poderia fazer um teste com a tag "position" na sua DIV de fundo.

Caso não dê certo, post o codigo das duas DIVs para analisarmos.

valeu

at++

Giovani · Julho 30, 2010

Ronaldo AmzBr., seja bem vindo ao fórum.

Para que o pessoal possa tentar te ajudar, poste um link com o que você já fez.

GabrielFerrari · Julho 30, 2010

Como o Giovani falol o ideal é postar o link do seu site.

Mas caso a solução do Rogério de Paula não funcionar tenta tirar o background-repeat.

Pelo que entendi o fundo tem o tamanho da div.

Ronaldo AmzBr. · Julho 30, 2010

Valeu Pessoal,

Então de acordo com o Rogério o background position absolute funcionou, porem o fundo se restringiu no tamanho do width de texto, e então tentei colocar o absolute com width de 100% e olha o bendido erro ai dinovo!

Acesse ai e façam o texte:

- Erro Chato

Lembrando, se redimencionar o tamanho horizontal no navegador até antes do texto, esta tudo certo. O probelma é quando diminuimos a janela, por exemplo, até a metade da caixa de texto, então ele gera a barra de rolatem horizontal, nesse momento se utilizarmos a barra, o texto é mostrado porem o fundo não.

Aguardo e agradeço pessoal.

rogerio de paulo · Julho 30, 2010

Ronaldo, tem como você colocar o seu site on-line???

Pois poderemos ver o codigo e vai ficar melhor para podermos te ajudar.

valeu

at++

EuToComProblema! · Julho 30, 2010

jah tentou colocar

overflow:auto; ou visible

na div melao?

Ronaldo AmzBr. · Julho 30, 2010

Ja tentei sim, no overflow visible nã adianta anda e na overflow auto ela fica como o background fixo, gerasse uma barra de rolagem apenas para o texto.

tentei também os atributos min e max width que não adiantou =\

Achei que fosse também o tipo de imagem que eu estava utilizando, mudei e nada, mudei até o doctype do html e nada também. Quando eu tiro a linha de doctype o IE reconhece e faz certinho, ja o firefox até com doctype strick 1.0 não sai da moita.

Então Rogério como assim colocar on? você nao esta conseguindo ver o código fonte? aqui ele ta dando normalmente

No link que passei acima esta assim:

<!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=utf-8" />
<title>Um Errinho Filho da mãe</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
.melao {
	background:url(images/back_paisagem.jpg) no-repeat;
	height:600px;
}
.cachorro {
	width:450px;
}
</style>
</head>

<body>

<div class="melao">
<div class="cachorro">
Experimentem redimencionar o navegador até ele gerar a barra de rolagem horizontal, nesse momento se utilizarmos a barra todo o conteúdo DE TEXTO é mostrado já a imagem BACKGROUND fica BRANCA.

(ERRO ACONTECE TANTO NO MOZILA QUANTO IE, JA TENTEI TAMBÉM ALTERAR O TIPO DE DOCTYPE W3C E NADA.
</div>
</div>

</body>
</html>

Agradeço de Coração a atenção de todos!

EuToComProblema! · Julho 30, 2010

eu consegui acessar o link.

tive um problema parecido que resolvi com padding, mas era um link com imagem, entao nao fazia mal o padding ser grande ou pequeno...

tenta por um padding:1px

Ronaldo AmzBr. · Julho 30, 2010

eu consegui acessar o link.

tive um problema parecido que resolvi com padding, mas era um link com imagem, entao nao fazia mal o padding ser grande ou pequeno...

tenta por um padding:1px

Puts o padding também não resolveu!!!

rogerio de paulo · Julho 31, 2010

E ai meu irmão

Faz o seguinte teste.

Aqui:

.cachorro {width:450px;}

Troque a medida pixel por porcentagem.

Por exemplo:

.cachorro {
    width:50%;
}

Tenta fazer um teste apagando o width da class .melao ou também tirando essa class .melao, apanas para teste.

Faz o teste ai e nos dê um retorno

Valeu

at++

exacode · Julho 31, 2010

Olá,

Adicione o min-width à class melao:

.melao {
        background: url(images/back_paisagem.jpg) no-repeat;
        height: 600px;
        min-width: 450px;
}

Cumps

angelorubin · Julho 31, 2010

Bom dia,

Aqui funcionou assim:

.melao {
	background:url(img/back_paisagem.jpg) no-repeat;
	height:600px;
	}
	
.cachorro {
	width:45%;
	}

Espero que ajude.

Ronaldo AmzBr. · Julho 31, 2010

Rogério, velho valeu por ter participado desdeo o início.

Galera deu Certo! Dexa eu falar aqui a conclusão:

- De acordo com o Rogério de Paula e Angelo Rubin, o fato de colocar width 45%, a caixa de texto fica "redimencionavel" de acordo com a redução da janela, o que prejudicaria a estruturação de design (as vezes você conta com apenas 2 linhas de texto em uma medida de 450px e ja coloca uma outra imagem)

O que deu realmente certo foi sempre que utilizar uma div para imagem de fundo para sobrepro uma div de texto, devo colocar o "min-height" na div fundo correspondente ao width da div texto. Como o EXACODE me explicou!

VALEU A TODA A COMUNIDADE IMASTER QUE ME AJUDOU, e tenham certeza que sempre que houverem dúvidas que eu possa ajudar no forum estarei aqui! Muito Obrigado!

exacode · Julho 31, 2010

É esse o espírito Imagem Postada e nós cá estaremos.

Há que ser humano, temos que nos ajudar uns aos outros Imagem Postada .

Cumps

Arquivado

[Resolvido] Background Cortando Imagem

Recommended Posts

Ronaldo AmzBr. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rogerio de paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ronaldo AmzBr. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rogerio de paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

EuToComProblema! 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ronaldo AmzBr. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

EuToComProblema! 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ronaldo AmzBr. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rogerio de paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

exacode 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ronaldo AmzBr. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

exacode 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Fóruns

Tempo Real

Informação importante