Tamaño de fondo de CSS3: la cubierta no hace que la imagen se cubra verticalmente

Estoy tratando de crear un sitio web con una imagen de fondo que siempre quiera llenar toda la pantalla.Tamaño de fondo de CSS3: la cubierta no hace que la imagen se cubra verticalmente

Cuando la ventana del navegador es corta y amplia, quiero que la imagen se expanda de modo que la parte superior de ella llene toda la pantalla en sentido longitudinal y el resto no sea visible.

Cuando la ventana del navegador es alta y delgada, quiero que la imagen se expanda para que la parte izquierda llene toda la pantalla en altura y el resto no esté visible.

Usando el tamaño de fondo de CSS3: la propiedad de portada hace que la primera funcione como un amuleto, la segunda no. En cambio, la imagen de fondo se encoge para que sea completamente visible dentro de la región estrecha disponible y se amplíe al ancho, y luego el resto de la página debajo es simplemente el color de fondo.

body { 
    background-color: #BF6F30; 
    color: black; 
    font-family: Georgia, "Times New Roman", sans-serif; 
    background: url(' ... '); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

¿Cómo puedo solucionar este problema?

Fuente

2012-01-22 Andrew Latham

¿Se puede publicar el código? ¡Eso no debería ser lo que está sucediendo! – skybondsor

Claro, acabo de hacer –

¿Esto soluciona el problema que está teniendo? http://stackoverflow.com/questions/8217037/css3-background-size-can-i-guarantee-coverage – skybondsor

¿Está interesado solo en utilizar una imagen de fondo CSS? Esto se puede hacer cargando una imagen y limitándola con CSS.

¿Funcionaría alguno de estos ejemplos?

HTML

<body id="page-body"> 
<img class="bg" src="images/bodyBackground1.jpg"> 
<div class="wrapper"> 


</div> 
</body>

CSS

html { 
     background: url(images/bodyBackground1.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
} 

body { 
    background:#fff; 
    margin: 0; 
    padding: 0; 
    overflow:hidden; 
} 

html, body { 
    height: 100%; 
} 

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 esta otra? Esta carga las imágenes de una base de datos en una matriz y los carga al azar, sino que podría ser capaz de recoger alguna información de esta:

función de carga PHP

<?php 
    $bg_images = array(
     0 => 'comp1.png', 
     1 => 'comp2.png', 
     2 => 'comp3.png', 
     .... 
    ); 
    $image = $bg_images[ rand(0,(count($bg_images)-1)) ]; 
    $showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>"; 
?>

HTML

... 
<body> 
<?php echo $showBG; ?> 
<div id="wrapper"> 
...

CSS

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

img.source-image { 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
    min-width:1024px; 
}

Estas opciones deben llenar la ventana del navegador de acuerdo con el alto y el ancho.

Fuente

2012-01-24 02:32:24

body { background: url("...") no-repeat center center fixed; background-size: cover; }

Fuente

2015-04-20 12:51:40 Habax

Tamaño de fondo de CSS3: la cubierta no hace que la imagen se cubra verticalmente

Respuesta

Cuestiones relacionadas