Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

protoman

[Resolvido] Background 100% fixo porém maior que a Tela

Por , em Desenvolvimento frontend

Recommended Posts

protoman    0

protoman
Postado

Pessoal!

Estou com um problema aqui que varios programadores que conheço não conseguiram resolver

Mas acredito que na informática há jeito pra tudo

Seguinte:

Preciso fazer um background extenso (maior que a tela), porém ele não pode aparecer com barra de rolagem

ou seja:

um background com "width:100%", que acompanhe o tamanho da página, se a página tem "height:700px" apareça só 700px do background

se a página for menor ela permanece nos "min-height:100%".

 

mais uma vez:

Seria um background em 100% com "height" maior que a tela, porém que não apareça barra de rolagem para mostrar o background todo

e ele só apareça SE a PÁGINA precisar de barra de rolagem vertical.

 

Bom, meu teste esta assim (foi a solução mais proxima que cheguei):

<!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>Bg</title>
<style type="text/css">
<!--
body {
margin:0px;
}
.wideframe{
width:100%;
min-height:100%;
}
.imgwide{
width:100%;
float:left;
background:fixed;
}
.pagina{
width:500px;
background:#FF0000;
color:#FFFFFF;
position:absolute;
}
-->
</style></head>

<body>
<div class="wideframe">
<img src="vertical.jpg" class="imgwide"/>
<div class="pagina">
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
 </div>
</div>
</body>
</html>

PS.1.0: A imagem que estou testando é essa:

http://www.astromag.co.uk/images/vertical.jpg

 

PS.2.0:Percebem como a imagem em background faz a barra de rolagem vertical enorme?

 

PS.3.0:Já tentei "position:fixed;" não funciona, pq acompanha o texto, fica estático o backgroun

 

PS4.0: "Overflow:hidden" tb não funfa com imagem

 

PS5.0: Então, Se alguém saber/conseguir alguma solução em Css ou mesmo em JS, mas que possíbilite isso acontecer seria ótimo!

 

PS6.0: Abração a Todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

protoman    0

protoman
Postado

Com CSS não rola, não tem como fazer.

Tens que bolar uma gambiarra aí, anti-semântica, mas você consegue o resultado.

 

Joga a imagem no HTML, diretaço e aplica nela o width, height, positions, z-index menor de todos.

Se realmente precisa disso urgente, faça assim e depois procure por um script (que provavelmente, se isso for possível, só vais achar algo em JavaScript).

 

Que tal?

Blza, de ajax e JS eu não manjo mas vou procurar ajuda,

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito