Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
isso msm mana! vlw...
edit: não ta funcionado ______________
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><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><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></div>
</body>
</html>
:seta: [Script](http://nanotux.com/plugins/fullscreenr/js/jquery.fullscreenr.js):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;Movido:
Webstandards: CSS / XML / XHTML / HTML :seta: Javascript / DHTML
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{#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.
da pra fazer sem o css?
Dinâmicamente ou você usa CSS ou usa JS, que vai mexer no CSS de qualquer maneira.
pow to querendo fazer um site no estilo desse mano: http://lewisking.net/
>
pow to querendo fazer um site no estilo desse mano: http://lewisking.net/
Se tiver preguiça, só vai ficar querendo mesmo..
ahm? quale dessa? to querendo fazer q quando desse o de baixo tambem fica infinito eh possivel?
>
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 :)
>
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?
>
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.
:seta: http://nanotux.com/plugins/fullscreenr/index.html
É isso?
Script:
:seta: http://nanotux.com/plugins/fullscreenr/js/jquery.fullscreenr.js