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?

Por , em Javascript

Recommended Posts

kenweb    0

kenweb
Postado

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

Diéssica    140

Diéssica
Postado

Tá sim, como tu adaptou?

 

É só fazer igual aqui:

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

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fullscreenr v1.0 demo page</title>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- JavaScript codes -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>

<script type="text/javascript">  
	<!--
		// You need to specify the size of your background image here (could be done automatically by some PHP code)
		var FullscreenrOptions = {  width: 1024, height: 683, bgID: '#bgimg' };
		// This will activate the full screen background!
		jQuery.fn.fullscreenr(FullscreenrOptions);
	//-->
</script>
</head>
<body>
<!-- This is the background image -->
<img id="bgimg" src="img/bg.jpg" />
<!-- Here the "real" body starts, where you can put your website -->
<div id="realBody">
	<!-- This is just an example div, you can remove it -->
	<div id="exampleDiv">

		<a href="http://nanotux.com/blog/fullscreen/">back to the plugin's documentation/download page</a>
	</div>
<!-- Here the "real" body ends, do not place content outside this div unless you know what you are doing -->
</div>
</body>
</html>

 

 

:seta: Script

:seta: jQuery

:seta: CSS

 

 

body {
overflow:hidden; 		/* needed to eliminate scrollbars caused by the background image */
padding:0;margin:0;		/* necesarry for the raster to fill the screen */
height:100%;width:100%;
}

#bgimg {
position:absolute;
z-index: -1;
}

#realBody{
position:absolute;
z-index: 5;				/* Place the new body above the background image */
overflow:auto; 			/* restore scrollbars for the content */
height:100%;width:100%;	/* Make the new body fill the screen */
background: url('../img/raster.png'); /* this is just a fancy raster, you can remove it; I kinda like it though */
}

 

 

 

Movido:

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diegus Miestro    21

Diegus Miestro
Postado

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

Diegus Miestro    21

Diegus Miestro
Postado

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

Diéssica    140

Diéssica
Postado

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

Se tiver preguiça, só vai ficar querendo mesmo..

 

http://forum.imasters.com.br/topic/456430-como-fazer-um-fundo-sem-fim/page__view__findpost__p__1806392

http://forum.imasters.com.br/topic/456430-como-fazer-um-fundo-sem-fim/page__view__findpost__p__1806574

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

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

minverva    0

minverva
Postado

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

 

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

Diegus Miestro    21

Diegus Miestro
Postado

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
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito