Página 1 de 1

imagen de fondo para web al 100%

Publicado: Mar Nov 12, 2013 9:33 pm
por GooFercarlos
Buenas Noches a todos,
navegando he visto varios sitios, foros, etc... de gente que busca una solución para colocar una imagen de fondo a 100% y que se acomode a la resolución de pantalla que se tenga. Bien yo aquí os publico una de las tantas soluciones que ya pueden existir, como en muchos sitios se esta utilizando la librería de JavaScript Jquery pues vamos a usarla.
1.- crearemos un div con este estilo css
#fondoweb{position:absolute; z-index:1; width:100%; height:100%;}
el HTML quedaría asi
<div id="fondoweb"></div>
como es de posición absoluta da igual donde se coloque el código HTML dentro del resto, lo mas lógico seria después de body

ahora pasemos al código para jquery
$(document).ready(function() {
var height = $(window).height();
var width = $(window).width();
$('#fondoweb').html('<img src="imagenes/bgpage.jpg" width="'+width+'" height="'+height+'">');
$(window).resize(function() {$('#fondoweb').html( '<img src="imagenes/bgpage.jpg" width="'+$(window).width()+'" height="'+ $(window).height() +'">' );});
});

esto que hara?? Bien, primero creamos dos variables que contienen el alto y ancho de la ventana recién abierta y con ellas asignamos esos mismos valores a la imagen, la función de jquery html se encarga de insertar la imagen dentro del div con el id fondoweb, la función resize de jquery se encarga de ir modificando esos mismos valores dinámicamente.
Bueno y fin de la tontería, jajajaja, espero que os guste y si os a de servir en algo pues mejor aun.

Saludos a todos

Re: imagen de fondo para web al 100%

Publicado: Dom Abr 06, 2014 5:17 am
por boristhespider
De hecho, es tan simple como:
body {
background-image: url(xxx) no-repeat;
background-size: 100%;
}

Re: imagen de fondo para web al 100%

Publicado: Jue Feb 05, 2015 5:05 pm
por Invitado
y si redimensinas la ventana?