Tema: Ajustar ancho pero no alto de background.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/04/2014, 15:34
jurassicboy
 
Fecha de Ingreso: agosto-2009
Mensajes: 91
Antigüedad: 14 años, 9 meses
Puntos: 2
Ajustar ancho pero no alto de background.
Buenas noches compañeros,


Hacía tiempo que no tocaba php y css. Las cosas han cambiado y me encuentro con que me gustaría ajustar el ancho de mi página al ancho del móvil. La página web de prueba es sencilla, tengo una estructura html típica y un background para el body. Me gustaría que el body con su background ocupara el ancho de cualquier dispositivo, pero en cambio el alto debería sobrepasar el límite de la pantalla para poder hacer una barra de scroll vertical.

En el ordenador el ancho se conserva perfectamente, pero al abrir la página con el móvil el ancho se corta a ambos lados. El alto se respeta correctamente.

Adjunto el código con el que más o menos y con vuestra ayuda creo que puedo conseguirlo:

HTML:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6. <link rel="icon" type="image/png" href="faviconbb.png">
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <!--<meta name="viewport" content="width=device-width">-->
  9.  
  10. <title>Mi web de prueba</title>
  11.  
  12. <link href="style.css" rel="stylesheet" type="text/css" />
  13.  
  14. </head>
  15.  
  16. <body class="body_style">
  17.  
  18.   
  19.  
  20. </body>
  21.  
  22. </html>



Style.CSS:


Código CSS: 
Ver original
  1. .body_style{
  2.     
  3.     background: url("images/background.jpg") no-repeat center center; 
  4.     -webkit-background-size: cover;
  5.     -moz-background-size: cover;
  6.     -o-background-size: cover;
  7.     background-size: cover;
  8.     
  9.     
  10.     width: 100%;
  11.     overflow-y: scroll;
  12.     overflow-x: hidden;
  13.     height:2160px;
  14.     
  15.   }



Muchas gracias a todos de antemano por vuestro tiempo y ayuda