Soy muy nuevo en desarrollo Front-end y de la Fundación.

Estoy tratando de conseguir <div class="main-header"> a ser una imagen de pantalla completa que desciende rápida.

¿Alguien puede decirme qué estoy haciendo mal? Es escala correctamente, pero no se muestra la imagen completa. Yo también quería que el <div class="large-6 large-offset-6 columns"> para sentarse encima es en un dispositivo móvil, es posible?

El HTML:

<!-- MAIN HEADER -->
<div class="main-header">
   <div class="row">
     <div class="large-6 large-offset-6 columns">
       <h1 class="logo">BleepBleeps</h1>
       <h3>A family of little friends<br>that make parenting easier</h3>
     </div> <!-- END large-6 large-offset-6 columns -->
   </div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->

El CSS:

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

h1.logo {
    text-indent: -9999px;
    height:115px;
    margin-top: 10%;
}
  • Espera… que quería Que en TODA la página… ohhhh Aquí. body { background: url(«../img/bb-background2.png») no-repeat fixed centro centro / tapa transparente; color: #999999; font-family: ‘Lato’,sans-serif; }
  • quitar el fondo principal de la cabecera
  • He utilizado «Perfecto sensible fondos de pantalla completa«, y funciona bastante bien.
InformationsquelleAutor Tom Rogers | 2013-05-14

14 Comentarios

  1. 90

    http://css-tricks.com/perfect-full-page-background-image/

    //HTML
    <img src="images/bg.jpg" id="bg" alt="">
    
    //CSS
    #bg {
      position: fixed; 
      top: 0; 
      left: 0; 
    
      /* Preserve aspet ratio */
      min-width: 100%;
      min-height: 100%;
    }

    O

    img.bg {
      /* Set rules to fill background */
      min-height: 100%;
      min-width: 1024px;
    
      /* Set up proportionate scaling */
      width: 100%;
      height: auto;
    
      /* Set up positioning */
      position: fixed;
      top: 0;
      left: 0;
    }
    
    @media screen and (max-width: 1024px) { /* Specific to this particular image */
      img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
      }
    }

    O

    //HTML
    <img src="images/bg.jpg" id="bg" alt="">
    
    //CSS
    #bg { position: fixed; top: 0; left: 0; }
    .bgwidth { width: 100%; }
    .bgheight { height: 100%; }
    
    //jQuery
    $(window).load(function() {    
    
            var theWindow        = $(window),
                $bg              = $("#bg"),
                aspectRatio      = $bg.width() / $bg.height();
    
            function resizeBg() {
    
                    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                        $bg
                            .removeClass()
                            .addClass('bgheight');
                    } else {
                        $bg
                            .removeClass()
                            .addClass('bgwidth');
                    }
    
            }
    
            theWindow.resize(resizeBg).trigger("resize");
    
    });
    • el sitio web siempre es donde la versión del navegador es el problema, todo funciona en todos los navegadores aceptan Ie7 y 8.. no te ves en la web?
    • CSS métodos (#2 más que #1) trabajo en IE7/8, jquery método funciona en IE7+. No sé a qué se está refiriendo cuando dice,»no te ves en el sitio web?» porque no hay sitio aparece en la pregunta. Si estás referencia el artículo I, siempre, entonces USTED necesita para ir a través y leer como se establece claramente navegador admitido/versiones para cada método.
    • He utilizado este método de Chris Coyier. Funciona. Acabo de probarlo y esta marca la respuesta correcta.
    • Hola @tPlummer Gracias por el apoyo, y lo siento si fue una pregunta duplicada. Nuevo a Desbordamiento de la Pila, y de la Fundación. Realmente aprecio la ayuda, aunque.
    • También el z-index de jugar su papel. Agregar en el archivo css de este => z-index:-100; para poner en orden la imagen detrás de todo
  2. 25
    <style type="text/css">
    html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    </style>
    • Cuando uso esta en una ventana completa y tamaño div funciona bien en equipos de escritorio. Si bien en los teléfonos y tablets que se extendía para ajustarse a la altura de la página en lugar de sólo el div me asignar. Alguna idea de por qué?
    • alguna solución para eso? Me estoy enfrentando problema similar en PWA pantalla completa lanzamiento 🙁
    • Lo siento, no recuerdo. Ha sido largo, pero creo que tengo que trabajar desde que se inauguró el sitio web en marcha y funcionando durante unos tres años. A partir de ahora que el código ya no es archivados sin embargo.
    • gracias por responder, en realidad, me las arreglé para resolverlo!
    • Estoy teniendo el mismo problema – ¿recuerda cómo se resuelve el problema de la bg imagen de llenar toda la página de altura en lugar de sólo el div es asignado?
  3. 7

    Una pista sobre el «background-size: cover» de la solución, tienes que poner después de que «de fondo» de la definición, de lo contrario no funcionará, por ejemplo, esto no va a funcionar:

    html, body {
        height: 100%;
        background-size: cover;
        background:url("http://i.imgur.com/aZO5Kolb.jpg") no-repeat center center fixed;
    }

    http://jsfiddle.net/8XUjP/58/

  4. 6

    He tenido este mismo problema con mi pre-lanzamiento del sitio EnGrip. Me fui a vivir con este problema. Pero después de unas cuantas pruebas, finalmente, esto ha funcionado para mí:

    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    background-attachment: scroll;
    background-position: 50% 50%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    z-index: 0;

    puro CSS solución. Yo no tengo ningún JS/JQuery revisión por aquí. Incluso soy nuevo en este desarrollo de la IU. Sólo pensaba que iba a compartir una solución de trabajo ya que he leído este hilo ayer.

    • Yo uso el siguiente código background-repeat:no-repeat;background-size: cover;background-attachment: scroll;background-position: 50% 50%;padding-top:101px; y no me funciona bien
  5. 5

    para pantalla Completa sensible de la imagen de fondo

    conjunto de css altura ( altura:100vh )

    ejemplo :

    .main-header {
        background-image: url(../img/bb-background2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height:100vh;  /* responsive height */
    }
  6. 4

    Yo personalmente no recomiendo para aplicar el estilo de etiqueta de HTML, puede tener efectos después en algún lugar de la parte posterior del desarrollo.

    así que yo personalmente sugiero aplicar la propiedad background-image para el cuerpo de la etiqueta.

    body{
        width:100%;
        height: 100%;
        background-image: url("./images/bg.jpg");
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    Este sencillo truco resuelto mi problema. esto funciona para la mayoría de las pantallas más grandes/pequeños.

    hay muchas maneras de hacerlo, he encontrado este el más simple con un mínimo de after effects

  7. 2

    Backstretch

    Echa un vistazo a este one-liner plugin que escala una imagen de fondo con receptividad.

    Todo lo que necesitas hacer es:

    1. Incluir la biblioteca:

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

    2. Llamar al método:

    $.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

    Yo lo he utilizado para un simple «bajo construcción en el sitio web» sitio tenía y funcionaba perfectamente.

    • downvote fue problema para el aumento de la complejidad? Creo que el resultado puede ser hecho en puro css?
    • 5 años más tarde y yo estaría de acuerdo con usted. Siendo una opción, sin embargo. No es que no funciona. Típicamente, sólo downvote soluciones que en realidad no responder a la pregunta original.
  8. 0

    He hecho esta función de javascript: es fijar la imagen de fondo para su tamaño de la pantalla en base a la más significativos de la dimensión (ancho od altura) sin cambiar la proporción de aspecto de imagen.

    <script language="Javascript">
    
    function FixBackgroundToScreen()
    {
        bgImg = new Image(); 
        bgImg.src = document.body.background;
    
        if ((bgImg.height / window.innerHeight) < (bgImg.width / window.innerWidth))
            document.body.style.backgroundSize = "auto 100%";
        else
            document.body.style.backgroundSize = "100% auto";
    };    
    </script>

    Esta función es el único que usted necesita. Debe ser llamado con la ventana.evento onresize y desde el cuerpo.evento onload. La imagen debe ser background-repeat: no-repeat; background-attachment: fixed;

    <script language="Javascript">
    window.onresize=function(){FixBackgroundToScreen();};
    </script>
    
    <body onload="FixBackgroundToScreen();">

    Se puede ver la función en mi sitio http://www.andreamarulla.it

    Lo siento por mi inglés…
    Andrea 😉

  9. 0

    Simple pantalla completa y centrada en la imagen
    https://jsfiddle.net/maestro888/3a9Lrmho

    JS:

    jQuery(function($) {
        function resizeImage() {
            $('.img-fullscreen').each(function () {
                var $imgWrp = $(this);
    
                $('img', this).each(function () {
                    var imgW = $(this)[0].width,
                        imgH = $(this)[0].height;
    
                    $(this).removeClass();
    
                    $imgWrp.css({
                        width: $(window).width(),
                        height: $(window).height()
                    });
    
                    imgW / imgH < $(window).width() / $(window).height() ?
                        $(this).addClass('full-width') : $(this).addClass('full-height');
                });
            });
        }
    
        window.onload = function () {
            resizeImage();
        };
    
        window.onresize = function () {
            setTimeout(resizeImage, 300);
        };
     
        resizeImage();
    });

    CSS:

    /*
     * Hide scrollbars
     */
    
    #wrapper {
        overflow: hidden;
    }
    
    /*
     * Basic styles
     */
    
    .img-fullscreen {
        position: relative;
        overflow: hidden;
    }
    
    .img-fullscreen img {
        vertical-align: middle;
        position: absolute;
        display: table;
        margin: auto;
        height: auto;
        width: auto;
        bottom: -100%;
        right: -100%;
        left: -100%;
        top: -100%;
    }
    
    .img-fullscreen .full-width {
        width: 100%;
    }
    
    .img-fullscreen .full-height {
        height: 100%;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <div id="wrapper">
        <div class="img-fullscreen">
            <img src="https://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg" alt=""/>
        </div>
    </div>

  10. 0

    Usted también puede hacer pantalla completa sección de banner sin utilizar JavaScript, css basado sensible a pantalla completa sección de banner , utilizando altura: 100vh; en el banner principal de la div, aquí tienen un vivo ejemplo de este

    #bannersection {
        position: relative;
        display: table;
        width: 100%;
        background: rgba(99,214,250,1);
        height: 100vh;
    }

    https://www.htmllion.com/fullscreen-header-banner-section.html

  11. 0
    For the full-screen responsive background image cover
    
    <div class="full-screen">
    
    </div>
    
    CSS
    
    .full-screen{
        background-image: url("img_girl.jpg");
        height: 100%; 
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
  12. 0

    Por useing este código siguiente :

    .classname{
        background-image: url(images/paper.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    Espero que funcione. Gracias

  13. 0

    Yo diría que, en el layout de dar un

    <div id="background"></div>

    y, a continuación, en tu css hacer

    #background {
     position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background: image-url('background.png') no-repeat;
      background-size: cover;
    }

    Y asegúrese de que la imagen de fondo en su app/assets/images y también cambiar el

    background: image-url('background.png') no-repeat;

    ‘de fondo.png’ a tu propio fondo de la imagen.

Dejar respuesta

Please enter your comment!
Please enter your name here