no se que estoy haciendo mal.
Código HTML :
body {
background-image: url(img/fondo.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
}<br />
function updateBackground() {
screenWidth = $(window).width();
screenHeight = $(window).height();
var bg = jQuery("#bg");
// Proporcion horizontal/vertical. En este caso la imagen es cuadrada
ratio = 1;
if (screenWidth/screenHeight > ratio) {
$(bg).height("auto");
$(bg).width("100%");
} else {
$(bg).width("auto");
$(bg).height("100%");
}
// Si a la imagen le sobra anchura, la centramos a mano
if ($(bg).width() > 0) {
$(bg).css('left', (screenWidth - $(bg).width()) / 2);
}
}
$(document).ready(function() {
// Actualizamos el fondo al cargar la pagina
updateBackground();
$(window).bind("resize", function() {
// Y tambien cada vez que se redimensione el navegador
updateBackground();
});
});
.banner-div {
background-image: url(img/fondo-banner.png);
background-repeat: repeat;
float: left;
height: 300px;
width: 900px;
margin-left: -450px;
position: absolute;
visibility: visible;
z-index: 5;
left: 50%;
top: 0px;
}
</style>
</head>
<body>
<div class="banner-div" id="banner"></div>
</body>
</html>
