Css normal:
html { background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Css para fazer a imagem expandir na vertical:
Aqui usamos um elemento inline, que será capaz de redimensionar a imagem em qualquer navegador. Montamos um min-height que o mantém enchendo a janela do navegador na vertical, e definir uma largura de 100%, o que mantém o preenchimento horizontalmente. Também estabeleceu um min-width da largura da imagem para que a imagem nunca fique menor do que realmente é.
#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; } <div id="bg"> <img src="images/bg.jpg" alt=""> </div>Método jQuery:
<html> <head> <style> #bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; } </style> <script> $(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); }); </script> </head> <body> <img src="images/bg.jpg" id="bg" alt=""> </body> </html>fonte : http://www.crashcoder.com/css-tutorials-how-to-set-full-image-as-background-in-website/
Nenhum comentário:
Postar um comentário