¿Poner una imagen de fondo al 100% con CSS?
5 seguidores
estoy haciendo una website basándome en html y css únicamente... pero no controlo todas las funciones del css,.
Intento poner una imagen de fondo que ocupe el 100% de la pantalla, tiene una resolución de 1024x768, pero ésta, para no perder la proporción me deja huecos a los lados y no cubre el total del fondo. he buscado soluciones y solo he encontrado una que es usando la etiqueta DIV haciendo que sea fija y al 100% pero no me convence.. hay alguna otra forma.. lo que quiero es que me cubra la superficie entera de la web.. si se sale por los lado, da = ya ajusto yo la imagen para que se vea lo que quiero mostrar.
gracias!
Usuario desconocido
Esto te debería servir:
body {
background: url(tumagen.gif) no-repeat center top;
}
jmpinero3d
eso ya lo he provado... y el resultado es algo asi....
jmpinero3d
jmpinero3d
http://jmpinero.890m.com/
Usuario desconocido
Hombre, pero eso es lógico. La imagen tiene un tamaño determinado y a una imagen de fondo no puedes modificarle las propiedades.
Ponle un color de fondo y a la imagen le metes un degradado en los bordes hacia ese color.... Hay multitud de cosas que puedes hacer para que no dé el cante.
Si lo que quieres es que esa imagen tome el tamaño de la pantalla, con css no se puede hacer.
jmpinero3d
Lo he solucionado creando un div absolute y fixed y a la imagen tambien le he dado una serie de propiedades con la que he conseguido el efecto que queria... pero esto me obliga a trabajar todos los elementos con divs.. y preferia no usarlos. si a alquien se le ocurre otra forma de solucionarlo, le agradeceria su colaboracion.
Usuario desconocido
bueno, pues te creas un div, q lo posicionas en absoluto y le pones la imagen. A ese le pones un z-index 1. Luego te creas un div#wrapper con posicionamiento absoluto y z-index 2 y le metes todo dentro.
De todas formas lo de que la imagen te la redimensione el explorador es algo chungo...
Writer_Head
A mi lo de que se deforme la imagen tampoco me gusta, quizá lo ideal sería que en el lado derecho de la imagen se repitiese un patrón del suelo al redimensionarse, ahora, que la repetición en el cielo quedase bien ya es más complicado. Como dice mambrú creo que lo que menos quebraderos te daría sería el usar una imagen con transparencia y degradar los bordes.
xavib
Esto te la deforma, pero igual te sirve. Hay bastante chicha en Google sobre esto y creo recordar que había un método que usaba JavaScript y que no daba mal resultado.
jmpinero3d
al final he optado por otro tipo de diseño, el echo de que la imagen se deforme hace que este tipo de proyecto sea muy arriegado... asias a to´por kolaborar!
urak
Amigo creo que tu error al cargar la imagen es que la imagen realmente no esta cargando.Estoy basándome en mi experiencia, lo que hice para solucionar el error es poner la imagen en la ruta de tu hoja de estilos (css) yo tenia mi hoja de estilos en una carpeta y dentro cree una carpeta llamada "img" y dentro de img puse la foto.Ahora solo faltaba cargarla con :
body{
background-image:url(img/"tufoto.jpg");
}
Espero que les sirva a los nuevos usuarios que trabajan con html y css y no podían solucionar este error
urak
Gracias, estaré mas atento para la proxíma :)
evginformatica
Hola.
En el HTML Pon en la imagen una clase para asociarlo con el CSS por ejemplo
<img class=“imagen” ...
Y en el CSS pon
.imagen { width: 100%; height: 100; }
Con esro la imagen ocupara toda la superficie del contenedor
Un saludo.
phpninja
Otra forma, con Javascript y jQuery:
https://www.phpninja.info/labs/resize-jquery-plugin/example2.html
gerardo_alcantara_rmz
Te dejo un ejemplo y un link para mayor informacion
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size