Fondo estático en HTML/Javascript
3 seguidores
Hola gente, a ver si podéis ayudarme con esta dudilla, ¿cómo pongo un fondo estático en una web, para que no se haga mosaico, y lo más importante, que se vea siempre igual independientemente de la resolución del monitor en el que se vea la web?
Saludicos ;)
adrivelez
Ooookey, pues cuando me ponhga con la web, si al probar no me sale lo que quiero, retomo el post. (aunque con lo que me has dicho creo que voy bien)
¡Muchísimas gracias!
dagi3d
en el caso de ninja, es una imagen no tan ancha que tiene un fundido a negro: http://www.ninja-support.com/site-media/images/ninja-background.jpg
por esto te digo, que habría que ver qué diseño quieres plantear y luego ver cómo hacerlo
adrivelez
Hala, ¡muchas gracias!
Entonces, por ejemplo, para hacer como con la del ninja, sería igual que con lo del gecko, ¿no?
Si hago un fondo de 3000 px de ancho, y le doy a fixed, ¿lo ajusta en todas las resoluciones de pantalla?
dagi3d
lo que se suele hacer en estos casos es hacer un fondo con el ancho lo suficientemente grande para que todas las resoluciones lo puedan ver bien(aquí hay que jugar un poco con los pesos y colores para que no se vaya de madre) y centrarlo
en geckowebs puedes ver cómo lo han hecho: http://www.geckowebs.com/images/bg_home.jpg
luego para que se te quede fijo, tienes la opción 'fixed' para los fondos:
body {
background: url('tufondo') no-repeat fixed center 0;
}
en el último ejemplo, lo que se hace es meter un degradado en tu imagen y utilizar el color final como color de fondo. así, si hay mucho scroll y la imagen no da más de sí, no se notará la transición. el código podría ser así por ej.:
body {
background: #000 url('tu_fondo_con_fundido_en_negro') no-repeat fixed center 0;
}
adrivelez
Hola chicos, ante todo gracias por las respuestas.
La mejor forma de expresarme es con ejemplos:
Principalmente hablo de eso:
http://www.ninja-support.com/
Pero también me interesa esto (que el ancho se quede clavao, y el largo vaya pa'bajo pa'bajo):
http://www.geckowebs.com/
http://www.ernesthemingwaycollection.com/
¿Me expreso bien? :$
La duda es respecto a mi proyecto final de carrera, aún no la he empezado, pero quiero ir informándome ya, porque después de vacaciones la empezaré y quiero tener todo bajo control. Mi idea principal es hacer un fondo en plan como el de la web del ninja (estático, tanto en anchura, como en el tema de resoluciones).
dagi3d
si es una imagen que se repite, para que no te haga el efecto mosaico no es una cuestión html si no de prepararla desde tu editor de imágenes para que al repetirse no haga ese efecto. si lo que quieres es que no se repita, desde css puedes hacer algo así:
body {
background: url('tuimagen') no-repeat;
}
y respecto a lo de que se vea siempre igual independientemente de la resolución del monitor, habría que ver qué es lo que quieres hacer y optar por una solución(distintas imágenes en función de la resolución, usar fondos sobre fondos...)
sr_lucha
Buenas Shaggy, intenta poner como background del body y la propiedad no repeat. A ver si así funciona.