Quiero hacer una imagen en el fondo completo de un sitio web! Sé que suena bastante simple, pero simplemente me tiene loco, no se ajuste a la página, este es el último intento, me alcanza con!

CSS :

body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

Estoy usando Twitter Bootstrap así, pero la cosa es que, incluso sin que yo puedo hacerlo bien!

Cualquier ayuda se agradece.

EDIT: y yo no uso exacto de píxeles, porque estoy tratando de hacer una capacidad de respuesta + móvil de diseño.

No sé por qué votada abajo a la pregunta! Pero esto es lo que he resuelto!

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
intente width:100%, a continuación, quite el comentario que tiene en el fondo y hay que ir.
La cubierta se escala la imagen de todo el ancho del contenedor, mientras que el mantenimiento de la relación de aspecto. Me imagino que su fondo es de repetición, mientras que el uso de la cubierta, intenta esto, html, body {width: 100%; min-height: 100%; height: 100%; overflow: hidden;};
Podría usted aclarar que el comentario? Parece que usted quiere que todo el ancho y altura máxima. Si usted ha fijado la anchura y la altura de la página utilizando html, body {width: 100%; height: 100%;}, WooCaSh la respuesta debe trabajar para usted.
Yo estaba duhhing yo, tonto! =) Sabemos que usted NO desea que se repita ella =) y usted desea que se cubra toda la página. Pero si usted sólo quiere el ancho y alto de la imagen, a continuación, utilizar background-size: auto si usted desea cubrir el ancho completo de la intente background-size: 100% auto
Es mirada como él quiere conseguir fondo de pantalla en la misma proporción y escala de lo original… sin espacios en blanco sin ningún tipo de cortes… Es simplemente imposible. Me refiero a que es posible si se preparan todas las imágenes combinaciones para cubrir todas las dimensiones/ratios y scels de la imagen 🙂

OriginalEl autor 0bserver07 | 2013-06-12

4 Comentarios

  1. 13

    EDIT: he creado un DEMO con algunas cosas innecesarias eliminadas. Esto tiene la ventaja de no windowing su imagen de fondo. El DEMO funciona, pero no fue tan ampliamente probado como el citado código de abajo.

    Recientemente he trabajado en un proyecto donde necesitábamos esta cosa exacta. Yo estoy publicando desde mis archivos de proyecto, por lo que algo de esto puede ser innecesario, ya que era un miembro del equipo que escribió esto.

    Empezar por la creación de propiedades de html y el cuerpo.
    Entonces, tengo una raíz div dentro del cuerpo llamada fondo.

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    #background {
        background: #000000 url(urlHere) no-repeat bottom left;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        height: auto !important;
        min-height:100%;
    }

    De nuevo, algunos de los que estoy seguro de que es innecesario, pero espero te sirva de ayuda.

    height: 100%; height: auto !important; Es un tipo de hack o su error? Primero se establece la altura a 100% a continuación, reemplazar auto -.-
    Es por eso que señalar que algunos de los que era innecesario, y que yo era trasladarla de un viejo proyecto. Más tratando de ayudar a que cualquier cosa.
    Gracias, yo elegí el tuyo, porque me dio una idea para resolverlo de esta manera </br> <br / > ` #mybody { background: url(‘images/bodybg.jpg’) no-repeat center left; background-size: 100% 100%; width: 100%; height: 100%; height: auto !importante; min-height:100%; } #myheader { } #myfooter { } `
    He practicado un poco de la eliminación de la basura. Lo que descubrí fue que la parte más importante fue: altura 100% de los padres (html,body). altura: auto !importante; (en la imagen) y (min-height:100%;) en la imagen. También hay algunos estiramientos en mi caso, que puede ser fijo con background-size: cover; muchas Gracias, aunque!

    OriginalEl autor Corey Horn

  2. 6

    Usted puede hacer esto mediante la adición de propiedad background-attachment: fixed;

    body {
      background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
      background-attachment: fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
    }

    DEMO

    Pero usted debe saber que si la relación de la página de la dimensión y la dimensión de la imagen son diferentes a lo que la imagen puede ser cortado en la ventana.

    EDITAR

    Si para que la altura es más importante cambiar el parámetro backround-size a containt:

    body {
      background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
      background-attachment: fixed;
      -webkit-background-size: contain;
      -moz-background-size: contain;
      background-size: contain;
    }

    Contienen Demo

    Aún así no funciona! Los recortes de la altura! Hice las dimensiones de la imagen, incluso los pequeños, todavía! por más pequeño que quiero decir 1024×760..: (!
    Debido a que altura de la ventana no es la misma como la resolución de su monitor. El navegador tiene menor altura que la de su monitor. Puede que nos muestran el resultado de la mina de código? Simplemente compartir printscreen.
    Yo no puedo publicar una foto! Pero cuando uso el fragmento, solo corta la parte inferior de la imagen.
    Mira en mis editar y probar la segunda opción.
    Ahora bien, lo que pasó es que la visualización de imagen de altura completa, pero la anchura es reducir a la mitad, que dejan a los lados en blanco vacío con el color de fondo me dio. :(! Caramba no puede blv estoy atascado con esto.

    OriginalEl autor WooCaSh

  3. 0

    Usted necesita ajustar la altura para el primer elemento de la página.

    html, body { margin:0; height: 100%;}

    Ver más aquí:

    http://imasters.com.br/front-end/css/por-que-height-100-nao-funciona/

    No creo que él habla portugués =( Ele nao falo portugues
    Sí, puedo poner también el enlace en Chino/Tinta/Egipcio idiomas que será tan útil como su
    Sire he probado este, es el mismo que el comentario de arriba, sigue dando me capaces de desplazamiento de la ventana, pero no el tamaño real de la imagen.
    ¿Cuál es el tamaño de la imagen?
    uno de ellos es de 1600 x 2024, y luego probé con otro que es 2800×1700 desde otro sitio web, todavía no se hacer un cambio!

    OriginalEl autor monteirobrena

  4. 0

    ¿Por qué no importar el img en Flash (Programa de Microsoft) y convertir la img en el Vector de IMG (Vector: las Imágenes que la calidad no es efectuado (como mucho) cuando la Alteración de la altura y la anchura.) Después de hacer los ajustes para el vector img (cambiando el img para la resolución de su plataforma actual) guardar y aplicar en tu HTML. Yo le aconsejo hacer una copia de seguridad, especialmente si su cruz de plataformas que HTML para diferentes resoluciones.

    …..en serio?

    OriginalEl autor StudenProg

Dejar respuesta

Please enter your comment!
Please enter your name here