1

Estoy trabaja con cordova en una pequeña App:

body {
  background: url("https://lorempixel.com/505/500/cats/1");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 505px 500px;
  background-color: #40B3CD;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Index</title>
    <link href="css/index.css" rel="stylesheet">
  </head>
  <body>
  </body>
</html>

En un navegador se ve así:

Imagen de fondo en un navegador

Cuando genero la apk y la ejecuto en el celular, se ve así:

Imagen de fondo en un celular

¿Es posible poner el fondo con una imagen que se adapte?

2
  • acepta el comentario de un novato y espero no liarte más. Tu problema principal creo que radica en el tamaño de la imagen. En el background-size: tienes puesto un tamaño en pixeles que probablemente sea mayor que el de tu dispositivo móvil, por eso se ve la imagen aumentada al abrirla desde ahí y más reducida cuando la ves desde la pantalla de tu ordenador (ya que tiene una resolución mayor a 500px). Te recomiendo que aprendas a implementar las media query en css. Un saludo.
    – Javier G.
    el 11 mar. 2018 a las 11:37
  • como ya te dijeron en el comentario anterior, tienes las dimensiones en pixeles y alli ya limitas la adaptación de esta, lo otro sería trabajar con media querys que adapten la imagen a las resoluciones mas apropiadas. Por otro lado, si quieres que se adapta simplemente ponla como baclground-size:cover esto automaticamente rellenara el total de la pantalla con la imagen, tambien te sugiero que cuides el aspect ratio de la imagen, ya que estas usando una imagen a 4:3 y por ende se verá un poco gigante en pantallas que no manejan ese estandar como los moviles. el 12 mar. 2018 a las 18:35

1 respuesta 1

0

Prueba así:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Index</title>
  </head>
    <style>

    body {
        background-image: url('http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg');
        background-color: #40B3CD;
        background-repeat:no-repeat;
        background-size: cover;
    }

  </style>
  <body>
  </body>
</html>
2
  • y esto que mejora o como puede ayudar a resolver lo que pregunta el OP.?
    – Jorgesys
    el 12 mar. 2018 a las 15:59
  • Si miras el ejemplo en un html la imagen se comporta de manera responsive. Le digo que lo pruebe a ver si se ve bien.
    – manelseo
    el 13 mar. 2018 a las 9:28

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.