toda - imagen responsive pantalla completa css
Imagen de fondo sensible a pantalla completa (11)
<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>
Soy muy nuevo en Front-end development and Foundation.
Intento que <div class="main-header"> 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 <div class="large-6 large-offset-6 columns"> sentara sobre él 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%;
}
Prueba esto:
<img src="images/background.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">
http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.html
Una sugerencia sobre 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;
}
He hecho esta función de Javascript: fija tu imagen de fondo en el tamaño de tu pantalla en la base en la dimensión más significativa (ancho y alto) sin cambiar la relación de aspecto de la 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 la única que necesitas. Debe invocarse con el evento window.onresize y desde el evento body.onload. La imagen debe ser background-repeat: no-repeat; background-attachment: fijo;
<script language="Javascript">
window.onresize=function(){FixBackgroundToScreen();};
</script>
<body onload="FixBackgroundToScreen();">
Puedes ver la función en mi sitio www.andreamarulla.it
Perdón por mi inglés ... Andrea ;-)
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");
});
Personalmente, no recomiendo aplicar estilo en la etiqueta HTML, podría tener efectos posteriores en alguna parte posterior del desarrollo.
así que personalmente sugiero que se aplique la propiedad background-image a la etiqueta body.
body{
width:100%;
height: 100%;
background-image: url("./images/bg.jpg");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
Este simple truco resolvió mi problema. esto funciona para la mayoría de las pantallas más grandes / más pequeñas.
hay tantas maneras de hacerlo, esto me pareció más simple con un mínimo de efectos secundarios
Tuve el mismo problema con mi sitio de lanzamiento previo EnGrip . Fui en vivo con este problema. Pero después de algunas pruebas, finalmente, esto funcionó 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;
solución pura de CSS. No tengo ninguna corrección JS / JQuery aquí. Incluso soy nuevo en este desarrollo de UI. Solo pensé en compartir una solución funcional desde que leí este hilo ayer.
Imagen simple a pantalla completa y centrada https://jsfiddle.net/maestro888/3a9Lrmho
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();
});
/*
* 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%;
}
<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>
También puede hacer una sección de pancarta de pantalla completa sin usar JavaScript, sección de banner de pantalla completa receptiva basada en css pura, usando altura: 100vh; en banner principal div, aquí tenemos un ejemplo en vivo para esto
#bannersection {
position: relative;
display: table;
width: 100%;
background: rgba(99,214,250,1);
height: 100vh;
}
https://www.htmllion.com/fullscreen-header-banner-section.html
Estiramiento de espalda
Echa un vistazo a este plugin de una sola línea que escala una imagen de fondo de forma receptiva.
Todo lo que necesitas hacer es:
1. Incluye la biblioteca:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
2. Llame al método:
$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
Lo usé para un sitio simple "en construcción" que tenía y funcionó perfectamente.
para la imagen de fondo sensible a pantalla completa
establecer la altura de css (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 */
}