imagen de fondo para web al 100%

HTML y todos sus derivados relacionados con la creación de sitios web

Moderador: Moderadores

Avatar de Usuario
GooFercarlos

imagen de fondo para web al 100%

Mensaje por GooFercarlos » Mar Nov 12, 2013 9:33 pm

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

boristhespider
Novat@
Mensajes: 4
Registrado: Dom Abr 06, 2014 5:01 am

Re: imagen de fondo para web al 100%

Mensaje por boristhespider » Dom Abr 06, 2014 5:17 am

De hecho, es tan simple como:
body {
background-image: url(xxx) no-repeat;
background-size: 100%;
}

Avatar de Usuario
Invitado

Re: imagen de fondo para web al 100%

Mensaje por Invitado » Jue Feb 05, 2015 5:05 pm

y si redimensinas la ventana?

Responder