Ajustar ancho pero no alto de background.

jurassicboy · #1 (**permalink**) 24/04/2014, 15:34

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<link rel="icon" type="image/png" href="faviconbb.png">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--<meta name="viewport" content="width=device-width">-->
 
<title>Mi web de prueba</title>
 
<link href="style.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body class="body_style">
 
  
 
</body>
 
</html>

Style.CSS:

Código CSS:

Ver original.body_style{
    
    background: url("images/background.jpg") no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    height:2160px;
    
  }

Muchas gracias a todos de antemano por vuestro tiempo y ayuda

pzin · #2 (**permalink**) 25/04/2014, 04:44

Tendrás que darle una altura:

Código CSS:

Ver originalhtml, body {
  height: 100%;
}

jurassicboy · #3 (**permalink**) 25/04/2014, 07:00

Cita:

Iniciado por pzin

Tendrás que darle una altura:

Código CSS:

Ver originalhtml, body {
  height: 100%;
}

Muchas gracias por tu respuesta.

Ya probé anteriormente a asignarle un height:100%, pero entonces tanto alto como ancho se ajustan al dispositivo y lo que busco es que el alto sobresalga de la página por abajo (para poder hacer scroll hacia abajo). Por ese motivo tengo ajustado el height a 2160px, para que siempre se salga de la pantalla por abajo y de esa manera pueda utilizar la barra de scroll.

En cambio el ancho sí debería ajustarse a los dispositivos y por mucho que de al width un 100% , si el alto no es está también definido en porcentajes en lugar de en píxels, no me lo ajusta y se corta tanto a derecha como a izquierda.

No sé si me explico bien

pzin · #4 (**permalink**) 25/04/2014, 07:09

Uhm. Pues no entiendo.

Ponerle un ancho a body no tiene sentido ya que siempre ocupará todo el ancho. Y su altura también es automática y dependerá del contenido que tenga, ¿no? ¿Qué altura tiene que tener? Según el contenido ¿no? ¿O no?

jurassicboy · #5 (**permalink**) 25/04/2014, 14:24

Sí, no sé si tiene mucho sentido. Digamos que tengo una imagen que quiero que ocupe todo el body, pero que el ancho se ajuste a todos los dispositivos y en cambio el alto se mantenga siempre tal y como es en px sin ajustarse.

Dejo el link a las pruebas que estoy haciendo: (tresw).brainbakers.(com).

Ahí se puede ver como en un dispositivo móvil (o directamente haciendo pequeño el ancho del navegador) el ancho no se reajusta al nuevo tamaño, viéndose recortado por ambos lados.

Mil gracias de nuevo :)

Linton · #6 (**permalink**) 26/04/2014, 00:37

No lo entiendo. Si tienes una imagen que a lo ancho siempre se ajusta al dispositivo pero permanece invariable en la altura, estás deformando la imagen. Una hilera de troncos se convertiría en un peine. ¿Por qué buscas esa anomalía?

pzin · #7 (**permalink**) 26/04/2014, 05:26

Es así como funciona cover, nunca deforma la imagen y siempre mostrará uno de los dos lados —en el que más se vea sin cortar— completamente.

Lo que podrías hacer es mediante media-queries llegado a cierto punto ajustar background-size a un valor numérico.

jurassicboy · #8 (**permalink**) 26/04/2014, 06:54

Cita:

Iniciado por Linton

No lo entiendo. Si tienes una imagen que a lo ancho siempre se ajusta al dispositivo pero permanece invariable en la altura, estás deformando la imagen. Una hilera de troncos se convertiría en un peine. ¿Por qué buscas esa anomalía?

Antes de nada, muchas gracias por responder. Pues no busco esa anomalía pero en un intento por conseguir lo que busco sí me he cruzado con ella. Lo que busco es ajustar el ancho a cualquier dispositivo dejando siempre más de largo que del propio ancho.

Como véis en la web el efecto deseado es que el usuario siga el camino de migas hasta abajo para encontrarse con "algo". A lo mejor debería crear un área central exclusivamente para la imagen

Cita:

Iniciado por pzin

Es así como funciona cover, nunca deforma la imagen y siempre mostrará uno de los dos lados —en el que más se vea sin cortar— completamente.

Lo que podrías hacer es mediante media-queries llegado a cierto punto ajustar background-size a un valor numérico.

Gracias de nuevo, voy a intentarlo con media queries aunque tenía le esperanza de encontrar alguna manera más "directa" para una web tan sencillita.