Autor Tema: Adaptar el tamaño de fondo de una imagen web con CSS en móviles android  (Leído 2224 veces)

Alanespartan

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 8
    • Ver Perfil
Hola muy buenas,

Vengo con la siguiente pregunta, ¿Cómo puedo hacer que en un dispositivo móvil la imagen que tengo como fondo cambie o se adapte? Es que ya lo he intentado yo pero no funciona :/
Los códigos que tengo son los siguientes:
HTML:
Código: [Seleccionar]
<!-- Fondo Parte Scroll -->
<style>
body {
background-image: url(images/bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
</style>
<!-- Termina Parte Scroll -->

CSS:
Código: [Seleccionar]
@media only screen and (max-width: 766px) {
      body {
        background-image: url(images/bg2.jpg);
      }
   }

Cabe decir que el fondo del que hablo es uno que hice que fuera un fondo "estático" en la parte superior de inicio de la pantalla, que al navegar hacía abajo esté se cubre por el resto de la página.

El sitio web es: arturopruebas.xyz para que puedan ver el ejemplo del que hablo si gustan

De paso preguntar si alguien sabría como hacer que un buscador pudiera funcionar ? tengo uno en el sitio web pero aun estoy en proceso de hacerlo funcionar, gracias :)

« Última modificación: 02 de Enero 2017, 23:07 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Buenas, las preguntas planteadas son un tanto amplias.

Para el fondo puedes probar con -webkit-background-size: 100%;

O también hacerlo de otro modo basándote en dos imágenes distintas (como en el siguiente ejemplo)

Código: [Seleccionar]
body {
background: url(../images/desktop.jpg) no-repeat center center fixed;
}

@media only screen and (min-width : 320px) and (max-width : 480px) {
background: url(../images/mobile.jpg) no-repeat center center fixed;
}

Para un buscador lo más fácil es implementar buscadores ya desarrollados. Si quisieras desarrollar uno propio esto puede ser bastante costoso (para ello podrías usar php junto a consultas sql).

Como recomendación general te diría que mires los cursos de programación web disponibles en http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86

De ahí podrás extraer muchas ideas, aunque depende del nivel de programación del que partas te resultarán más o menos útiles.

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".