1

introducir la descripción de la imagen aquí

Como puedo hacer que la imagen abarque todo el tamaño de la pantalla. Se que de las propiedad min-width y min-heigth pero ellas no hacen que logre cumplir con lo que requiero.

este es un ejemplo de un slider pero yo no deseo un slider... solamente una imagen fija de fondo.

Pero si reducen el tamaño del navegador en caso de que uses una pc puedes ver como se ajsuta automaticamente al tamaño de la pantalla.

otro ejemplo por si quedo duda de lo que deseo.

Yo descargue algunos ejemplos pero ninguno compatible con jquerymobile pues me funciona bien hasta que yo agrego la siguiente linea de codigo:

<script src="js/jquery.mobile-1.4.0-rc.1.js"></script>

E subido la pagina en un servidor de prueba para que tengan acceso completo al codigo.

Pagina de prueba fullScren


Gracias... Efectivamente tu codigo funciona muy bien en HTML y CSS pero el proyecto es el jqueryMobile y esto afecta los estilos.

Mi head tiene las siguiente estructura.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">

<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

Mira aqui el codigo del head.. cuando agregado los enlaces a las hojas de estilo de jquery y js todo cambia. :(

introducir la descripción de la imagen aquí

2 respuestas 2

5

¡Hola! Para poder hacer lo que deseas es necesario establecer en las etiquetas html y body un height del 100%. Y utilizar las siguientes propiedades de CSS, las cuales puedes leer aquí:

background-image: url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;

html, body{
    height:100%;
  }

#banner{
  background-image: url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
}

#banner p{
  text-align:center;
  font-size:20px;
  }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <section id="banner">
      <div class="header-content col-md-8">
          <p>El fondo de mi imagen se adapta al tamaño</p>
      </div>
    </section>
  </body>
</html>

EDITO: El problema esta que un div se esta 'carcomiendo' el código que yo te pase, lo único que tendrías que hacer sería cambiar el id banner al div que se carcome la etiqueta section, quedando de la siguiente manera (Solo muestro el body):

<body class="ui-mobile-viewport ui-overlay-a">
   <!-- Aquí añadiras el # llamado banner -->
   <div data-role="page" data-url="/pruebas/fullscreen.html" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" id="banner">
       <section>
          <div class="header-content col-md-8">
              <p>El fondo de mi imagen se adapta al tamaño</p>
          </div>
       </section>
    </div>
    <div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
           <span class="ui-icon-loading"></span>
           <h1>loading</h1>
    </div>
</body>
2
  • E subido la pagina en un servidor de prueba para que tengan acceso completo al codigo. [Pagina de prueba fullScren][1] [1]: judasniper.neocities.org/pruebas/fullscreen.html el 22 ago. 2016 a las 21:55
  • 1
    He editado mi respuesta. He podido ver la imagen a tamaño completo realizando lo que he comentado más arriba.
    – Hoose
    el 22 ago. 2016 a las 22:12
0

Hola puedes usar este ejemplo :

#banner{
overflow:hidden;
width:100%;
height:height;
margin:0 ;
padding:0;
background: url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg") no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-color: #464646;}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.