Tengo un problemilla a la hora de poner un fondo a tamaño completo del navegador y a la vez que sea responsive.
El problema lo tengo cuando lo visualizo en el movil, que no me adapta la imagen al tamaño de la pantalla, sino que me la corta dejando la mitad de la pantalla sin imagen.
Sin embargo, en el navegador del ordenador se adapta perfectamente. Es algo que no logro entender por qué pasa.
Muchas gracias de antemano!
El código HTML:
Código HTML:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Agencia y Escuela de Maquillaje Profesional | MERY Make-Up</title> <meta name="description" content="Máxima atención y calidad en nuestros servicios como agencia y escuela de maquillaje. Cursos de maquillaje hechos a tu medida. Infórmate!"> <meta name="keywords" content="cursos de maquillaje, escuela de maquillaje, servicios de maquillaje, agencia de maquillaje"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> </head> <body class="imagen-background-pag-inicial"> <header id="fondo-logo-pag-inicial"> <div class="contenedor-pag-inicial"> <img src="http://pruebasfalakata.com/wp-content/uploads/2013/11/logo.png" alt="logo Mery make Up"> </div> </header> <nav class="menu-pag-inicial"> <ul class="contenedor-pag-inicial"> <li><a href="#">Agencia</a></li> <li><a href="#">Escuela</a></li> <li><a href="#">Particulares</a></li> </ul> </nav> </body> </html>
Código:
.imagen-background-pag-inicial{
background-image:url(http://pruebasfalakata.com/wp-content/uploads/2013/11/5_baja-res.jpg);
background-position:center center; /*centrada vertical y horizontal*/
background-repeat:no-repeat;
background-attachment:fixed;/*la imagen de fondo está fija en el viewport, de modo que no se mueva cuando la altura del contenido supere la altura de la imagen*/
background-size:cover;/*la imagen se reescala cuando cambia el ancho de ventana*/
background-color:#090;
/*margin:0;*/
}
.contenedor-pag-inicial{
margin:0 auto;
width:300px;
}
#fondo-logo-pag-inicial{
background-color:#FFF;
opacity:0.9;
}
.menu-pag-inicial{
background-color:#090;
width:100%;
opacity:0.9;
}
.menu-pag-inicial ul{
width:300px;
height:40px;
padding:0;
}
.menu-pag-inicial li{
display:inline;
float:left;
}
.menu-pag-inicial a{
text-decoration:none;
color:#FFF;
line-height:40px;
width:100px;
display:inline-block;
border-right:1px solid #FFF;
text-align:center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.menu-pag-inicial li:last-child a{
border-right:0;
}
.menu-pag-inicial a:hover{
background-color:#FFF;
color:#090;
}
/*********************************
MEDIA QUERIES
***********************************/
@media screen and (max-width:767px){
.imagen-background-pag-inicial{
background-image:url(http://pruebasfalakata.com/wp-content/uploads/2013/11/Fotografía-books00371.jpg);
}
}
