DOKRY Desarrollo
  1. DOKRY Desarrollo
  3. Imagen de fondo sensible a pantalla completa

Imagen de fondo sensible a pantalla completa

Soy muy nuevo en Front-end development and Foundation.

Intento que

sea ​​una imagen de pantalla completa que se ajusta de manera responsable.

¿Alguien puede decirme qué estoy haciendo mal? Está escalando correctamente, pero no muestra la imagen completa. También quería que

sentara sobre él en un dispositivo móvil, ¿es posible?

El HTML: 

  
 
 
 
BleepBleeps
 
A family of little friends
that make parenting easier

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%; }

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

 //HTML  //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  //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"); });

Una sugerencia acerca de la solución “background-size: cover”, debe colocarla después de la definición de “fondo”; de lo contrario, no funcionará, por ejemplo, esto no 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/

Intereting Posts
¿Cómo usar el nuevo complemento de affix en bootstrap de arranque 2.1.0?desactivar la vista de zoom de iOS 10+ safari?¿Cómo mantener los elementos flexibles envueltos del mismo ancho que los elementos en la fila anterior?Botón de carga de elementos del archivo de formulario de Twitter Bootstrap¿Justifica la última línea de un div?cols, colgroups y css: hover psuedoclassLa decoración de texto CSS resalta el color¿Puedo agregar color a los icons de arranque solo con CSS?