4
html {
    background: url(images/1.png) no-repeat center center fixed;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
}

Tengo este código para adaptar la imagen de fondo a cualquier resolución, sin embargo no se adapta, solo se adapta como yo quiero donde estoy realizando la página. Pero al abrir la página en otro tipo de resolución, no se adapta como yo deseo si no que se desordena por completo.

¿Existe otro tipo de código que pueda usar para realizar esa acción?

1
  • "en otro tipo de resolución no se adapta si no que se desordena por completo". ¿Podrías mostrar con una imagen a qué te refieres con eso?¿Cómo no se adapta?¿Y cómo quieres que se adapte?
    – Alvaro Montoro
    el 12 abr. 2016 a las 16:51

2 respuestas 2

3

html {
    background: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg') no-repeat center center fixed;
    background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -o-background-size: contain;
}

Prueba con

html {
    background: url(images/1.png) no-repeat center center fixed;
    background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -o-background-size: contain;
}

En el siguiente enlace puedes testear los valores background-size y así ver cual es la que se adapte a tus necesidades.

0
2

Intenta con este código, yo lo implemento sobre la etiqueta body:

body{
  background: url(http://www.fondos7.net/wallpaper-original/wallpapers/naturaleza-y-rocas-10201.jpg) no-repeat fixed center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.