Ir para conteúdo

POWERED BY:

Arquivado

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

kenweb

Como fazer um fundo sem fim?

Recommended Posts

to cansado de colocar bg pra repetir no fundo do site ate q vi uns sites asssim e dei uma procurada pra mostrar oq eu kero fazer...

 

http://static.livedemo00.template-help.com/wt_37111/#!/page_home

 

a tela pode ser de qlqr tamanho e a imagem sempre preenche tudo bunitinho... to afim de fazer algo igual!

 

alguem sabe como fazer?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tá sim, como tu adaptou?

 

É só fazer igual aqui:

http://nanotux.com/plugins/fullscreenr/index.html

 

 

  Mostrar conteúdo oculto

 

:seta: Script

:seta: jQuery

:seta: CSS

 

  Mostrar conteúdo oculto

 

 

Movido:

Webstandards: CSS / XML / XHTML / HTML :seta: Javascript / DHTML

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bem, eu faço isso sem uso de JS

 

Exemplo HTML:

 

<html>
    <body>

         <img src="fundo.jpg" id="imgBackground" /> <!-- Sua Imagem de fundo -->

         <div id="novoBody"> <!-- O body normal será "anulado" e esse será o novo body -->
              Conteúdo vem aqui normalmente como se coloca no body
         </div>

    </body>
</html>

 

Exemplo Css:

 

body{
overflow: hidden; /* Com isso não haverá barra de rolagem */
width: 100%;
height: 100%;
}

#imgBackground{
position: absolute; /* Com isso ele irá "flutuar" sem entrar em choque com nenhum elemento */
width: 100%; /* Ocupa 100% da largura da tela */
height: 100%; /* Ocupa 100% da altura da tela */
top: 0; /* distancia do topo da tela */
left: 0; /* distancia da esquerda da tela */
z-index: 0; /* Posição dele em relação a demais elementos */
}

#novoBody{
position: absolute; /* Com isso ele irá "flutuar" sem entrar em choque com nenhum elemento */
width: 100%; /* Ocupa 100% da largura da tela */
height: 100%; /* Ocupa 100% da altura da tela */
top: 0; /* distancia do topo da tela */
left: 0; /* distancia da esquerda da tela */
overflow: auto; /* Como será o novo Body ele precisará da barra de rolagem caso seu conteúdo seja maior que a resolução do usuário */
z-index: 1; /* Posição dele em relação a demais elementos */
}

 

PS: o #novoBody estará sobre a #imgBackground e o Body. Como eles são Position: Absolute, imagine eles como folhas de retroprojetor que vão ficar uma em cima da outra.

 

PS2: Todo conteúdo do site você põe dentro da tag #novoBody como se tivesse colocando dentro do Body normal do HTML.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dinâmicamente ou você usa CSS ou usa JS, que vai mexer no CSS de qualquer maneira.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Compartilhar este post


Link para o post
Compartilhar em outros sites
  Em 07/02/2012 at 18:35, kenweb disse:

ahm? quale dessa? to querendo fazer q quando desse o de baixo tambem fica infinito eh possivel?

Não queria um fundo sem fim?

 

Vai por partes. Lê os posts e tenta fazer.

 

E os de baixo são só imagens com repeat. Dá pra fazer infinito. Estuda o código :)

Compartilhar este post


Link para o post
Compartilhar em outros sites
  Em 06/02/2012 at 19:44, kenweb disse:

to cansado de colocar bg pra repetir no fundo do site ate q vi uns sites asssim e dei uma procurada pra mostrar oq eu kero fazer...

 

http://static.livedemo00.template-help.com/wt_37111/#!/page_home

 

a tela pode ser de qlqr tamanho e a imagem sempre preenche tudo bunitinho... to afim de fazer algo igual!

 

alguem sabe como fazer?

 

Eu faço isso com um trick de css, mas ele não é totalmente cross-browser, se não me engano no IE6 não rola direito e no IE7 as vezes da um problema ou outro, dá pra ser feito por js, mas eu acho desncessário.

 

Num mundo ideal, você só faria

 

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

 

Mas como o IE existe e ainda é bem usado usa isso (de preferencia com aquela condiciona <![iF...

#bg {
position:fixed;
top:0;
left:0; 

/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}

 

Note que essa precisa de uma div, não pode ser aplicado direto no body ou html, por isso não gosto tanto

 

  Em 07/02/2012 at 18:35, kenweb disse:

ahm? quale dessa? to querendo fazer q quando desse o de baixo tambem fica infinito eh possivel?

 

Se você fizer com position: fixed, ele fica fixo na tela, enquanto o conteúdo "scrolla" sob ele, é isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites
  Em 07/02/2012 at 17:55, kenweb disse:

pow to querendo fazer um site no estilo desse mano: http://lewisking.net/

 

Com o que você quer é basicamente o que eu disse, só que haverá div's que preencherão 100% da largura e altura como a Img de fundo porém essas DIV's não seriam position: absolute.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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