Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Alanespartan en 20 de Diciembre 2016, 05:04

Título: Adaptar el tamaño de fondo de una imagen web con CSS en móviles android
Publicado por: Alanespartan en 20 de Diciembre 2016, 05:04

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 :)

Título: Re:Adaptar el tamaño de fondo de una imagen web con CSS en móviles android
Publicado por: Ogramar en 02 de Enero 2017, 23:08

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