Estoy tratando de tener una imagen de pantalla completa, bastante fácil con css, utilizando el siguiente código.

width:100%;
height:100%;
background: url('photo2.jpg'); 
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

pero la imagen ya está colocado en un html div, vea aquí

<div class="fixed-background">
  <img src="photo2.jpg"/>
</div>

Se necesitan para ser exactamente cómo sería el uso de la versión de css, la única diferencia sería la imagen se llama en html y no en la hoja de estilos.

  • u quiere hacer lo mismo mantener la imagen en html??
  • Sí, la imagen se agrega en wordpress y no puede ser añadido a la css
InformationsquelleAutor Dan | 2014-08-11

6 Comentarios

  1. 1

    probar este

    <style>
    body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .fixed-background {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    .myimg {
        height: inherit;
    }
    </style>
    
    <html>
    <body>
        <div class="fixed-background">
            <img src="public/dbs/images/1.jpg" class="myimg" />
        </div>
    </body>
    </html>
  2. 0

    Sin el uso de un fondo, considere esto:

    #mydiv {
        position: absolute;
        top: 50%;
        right: 50%;
        bottom: 50%;
        left: 50%;
        margin-top: -100px; /* (calculate half the height of your image) */
        margin-left: -100px; /* (calculate half the width of your image) */
    }
  3. 0

    Tratar el siguiente: http://jsfiddle.net/pj73m4po/4/

    Poner su imagen en un div 100% de alto y de ancho. Si usted no quiere que su imagen para ser estirada usted no desea utilizar la anchura y la altura por separado.

    body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .fixed-background {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    img {
        height: auto;
        width: auto;
        min-width: 100%;
        min-height: 100%;
    }

    Lugar, utilizar el min-width y min-height. si usted tiene una imagen predefinida puede ajustar la posición en el css. Si no, lamentablemente usted necesita tener javascript hacia el centro.

  4. 0

    Los puntos que deduzco de tu css son los siguientes:

    • Centro de la imagen
    • Fijar la posición de la imagen (para que no se desplace con la página)
    • De la cubierta de la ventanilla, la escala para caber en

    Que dijo, yo sugiero el siguiente dado su html

    .fixed-background{
       position:fixed;
       width:100vh;
       height:100vh;
       overflow:hidden;
    }
    
    .fixed-background > img{
       position:absolute;
       width:100%;
       height:auto;
       top: 50%;
       transform: translateY(-50%);
    }

    Honestamente, yo no he probado los de arriba, pero yo sospecho que usted puede conseguir algunos resultados extraños fija y posicionamiento absoluto juntos. Pero dado que el código define la anchura y la altura directamente a través de la ventanilla de unidades, debe ser bueno. Usted puede ser que necesite 100vh de margen aplicado a un hermano elemento para conseguir las cosas a la línea porque position:fixed; va a romper el elemento del flujo de documentos.

Dejar respuesta

Please enter your comment!
Please enter your name here