Como fazer um fundo sem fim?

<!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

Mostrar conteúdo oculto

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

Diegus Miestro · Fevereiro 7, 2012

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.

kenweb · Fevereiro 7, 2012

da pra fazer sem o css?

Diegus Miestro · Fevereiro 7, 2012

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

kenweb · Fevereiro 7, 2012

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

Diéssica · Fevereiro 7, 2012

Em 07/02/2012 at 17:55, kenweb disse:

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

kenweb · Fevereiro 7, 2012

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

Diéssica · Fevereiro 7, 2012

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 :)

minverva · Fevereiro 8, 2012

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?

Diegus Miestro · Fevereiro 8, 2012

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.

Arquivado

Como fazer um fundo sem fim?

Recommended Posts

kenweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

kenweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diegus Miestro 21

Compartilhar este post

Link para o post

Compartilhar em outros sites

kenweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diegus Miestro 21

Compartilhar este post

Link para o post

Compartilhar em outros sites

kenweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

kenweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

minverva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diegus Miestro 21

Compartilhar este post

Link para o post

Compartilhar em outros sites

select com varias categorias por horario

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

Fóruns

Tempo Real

Informação importante