[SOLUCIONADO] Fondo adaptado a móvil

[JuJoGuAl]

Buenas chicos, estoy haciendo una web tratando de adaptar la idea de Responsive y se pueda ver en cualquier dimension.

Mi problema lo obtengo con el fondo, tengo una img de fondo en el section (puesto que el footer nav y header tienen su fondo aparte)

esta img incluye un mapa mundi:



el codigo que uso en el section es:

Código HTML:

<section class="main">          
            <article class="articulo">
                <h2 class="subtit">Trade Consulting</h2>
                <p class="texto">
                    <p>Search and selection of suppliers</p>
                    <p>Sample check</p>
                    <p>Purchase order management</p>
                    <p>Payment management</p>                    
                </p>
            </article>
</section>
 

Código CSS:

.main { 
  background: url("../img/bg.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg.jpg', sizingMethod='scale')";
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg.jpg', sizingMethod='scale')";
  margin: 0;
  min-height: 600px; /*500 por los botones + 50 50 por top y bottom*/
  padding: 1em 0 1em 0;
  text-align: center;
  width: 100%;
}
 

Se puede ver en vivo aqui: http://jujogual.esy.es/

Lo que pasa es que en Moviles el Mapa Mundi no se ve bien se ve solo zonas aveces asia aveces europa, entonces a pesar que uso el COVER en el css no hay una manera que esa imagen se adapte a la pantalla en la que se esta viendo?

[MaNuX0218]

Yo lo pondría de esta manera y se te ajustará para reponsive.

Código CSS:

background-image: url('../img/bg.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
 

Saludos.

[JuJoGuAl]

Iniciado por MaNuX0218

Yo lo pondría de esta manera y se te ajustará para reponsive.

Código CSS:

background-image: url('../img/bg.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
 

Saludos.

esto lo que hace es escalar la imagen y pues me queda espacio en blanco por arriba y por debajo y no es lo que estoy buscando :(

[baldaweb]

Con css funciona para pc, en tablet o dispositivo móvil tendrás que usar jquery.

Con esto me funcionó:
http://srobbin.com/jquery-plugins/backstretch/

Saludos.

Tendrás que incluir el script en tu html

Código HTML:

{{-- Redimensionar la imagen --}}
{!! Html::script('js/tugesto/jquery.backstretch.min.js') !!}
{{-- Funciones --}}
{!! Html::script('js/tugesto/funciones.js') !!}
 

Y el archivo funciones contendrá este código con tu imagen:

Código Javascript:

$(document).ready(function() {
     $.backstretch("images/fondo.png");
});
 

[pzin]

¿Cómo quieres que se muestre la imagen? Si lo piensas bien, quieres que no se deforme, que siempre ocupe todo el espacio (que no quede nada blanco o sin fondo) y que siempre se vea todo… Caerás en la cuenta de que es físicamente imposible. No es una limitación de CSS, sino una limitación de lo posible (no puedes hacerlo ni en Photoshop). Se contradicen las cosas.

[fede5426]

Exactamente como dijo pzin, la imagen es mas ancha que alta, es imposible que sin deformarla ocupe el ancho y alto del dispositivo (que, en vertical, obviamente es mas alto que ancho).

En ese caso hay 3 opciones, una es usar cover, otra es editar una nueva imagen para dispositivos móviles y cambiarla con media queries, y la tercera es cambiar la imagen por un fondo de color sin mas, también usando media queries.

[JuJoGuAl]

Iniciado por baldaweb

Con css funciona para pc, en tablet o dispositivo móvil tendrás que usar jquery.

Con esto me funcionó:
http://srobbin.com/jquery-plugins/backstretch/

Saludos.

Tendrás que incluir el script en tu html

Código HTML:

{{-- Redimensionar la imagen --}}
{!! Html::script('js/tugesto/jquery.backstretch.min.js') !!}
{{-- Funciones --}}
{!! Html::script('js/tugesto/funciones.js') !!}
 

Y el archivo funciones contendrá este código con tu imagen:

Código Javascript:

$(document).ready(function() {
     $.backstretch("images/fondo.png");
});
 

Probaré esto intente no usar jquery

Iniciado por pzin

¿Cómo quieres que se muestre la imagen? Si lo piensas bien, quieres que no se deforme, que siempre ocupe todo el espacio (que no quede nada blanco o sin fondo) y que siempre se vea todo… Caerás en la cuenta de que es físicamente imposible. No es una limitación de CSS, sino una limitación de lo posible (no puedes hacerlo ni en Photoshop). Se contradicen las cosas.

En efecto logicamente una imagen de un tamaño no se adaptará a otro tamaño pero existe una forma de yo hacer esto?

e visto webs con imagenes con patrones de fondo y obvio al forzarlas en moviles no ves nada mal.

Pero como esta es un mapa mundi, cobre toda la pantalla pero no se muestra todo el mapa solo una porcion de el.

Pense en hacer una web por cada tamaño (ciertos tamaños) para poder tener en cuenta las resoluciones

[fede5426]

Iniciado por JuJoGuAl

En efecto logicamente una imagen de un tamaño no se adaptará a otro tamaño pero existe una forma de yo hacer esto?

e visto webs con imagenes con patrones de fondo y obvio al forzarlas en moviles no ves nada mal.

Como dije, crear una nueva imagen para dispositivos verticales (tablets y moviles), o en su defecto usar media queries para sacar la imagen de fondo en estos dispositivos y usar un color plano.

Iniciado por JuJoGuAl

Pero como esta es un mapa mundi, cobre toda la pantalla pero no se muestra todo el mapa solo una porcion de el.

Pense en hacer una web por cada tamaño (ciertos tamaños) para poder tener en cuenta las resoluciones

Otra opción podría ser colocar un size de 100% y usar un fondo azul en el body, algo asi:

Código CSS:

body{
    background-color:#0b1229;
    background-image:url("http://i.imgur.com/U3h0AEB.jpg");
    background-size:100%;
    background-repeat:no-repeat;
}
 

http://codepen.io/anon/pen/gpgbNe

En mi opinión, me quedaría con cover.. al final en los móviles yo creo que no es tan importante la imagen de fondo, siempre lo va a tapar el contenido principal, preocupate de que eso si se vea bien.

[JuJoGuAl]

Iniciado por fede5426

En mi opinión, me quedaría con cover.. al final en los móviles yo creo que no es tan importante la imagen de fondo, siempre lo va a tapar el contenido principal, preocupate de que eso si se vea bien.

Pienso igual pero mi cliente esta muy preocupado porque el mapa en resoluciones moviles no se aprecia....

Esa opcion es viable pero se veria muy pequeño empezaré a usar fondos para moviles (una version para ellos) y otra para tables.

Sabes donde puedo conseguir una guia de tamaños ?

Para tener una idea de que tamaño les dare a las nuevas imagenes?

[baldaweb]

// Averiguar si pantalla es apaisada o no
ratio = 1;

if (jQuery(window).width()/jQuery(window).height() > ratio) {
$(tu-id).height("auto");
$(tu-id).width("100%");
} else {
$(tu-id).width("auto");
$(tu-id).height("100%");
}

[JuJoGuAl]

Iniciado por baldaweb

// Averiguar si pantalla es apaisada o no
ratio = 1;

if (jQuery(window).width()/jQuery(window).height() > ratio) {
$(tu-id).height("auto");
$(tu-id).width("100%");
} else {
$(tu-id).width("auto");
$(tu-id).height("100%");
}

Que logro con eso?

[baldaweb]

Código:

En efecto logicamente una imagen de un tamaño no se adaptará a otro tamaño pero existe una forma de yo hacer esto?

Puedes acoplar la imagen según el dispositivo móvil si es apaisado o no y la imagen no se verá tan mal.

Aunque como te han dicho anteriormente :

Código:

¿Cómo quieres que se muestre la imagen? Si lo piensas bien, quieres que no se deforme, que siempre ocupe todo el espacio (que no quede nada blanco o sin fondo) y que siempre se vea todo… Caerás en la cuenta de que es físicamente imposible. No es una limitación de CSS, sino una limitación de lo posible (no puedes hacerlo ni en Photoshop). Se contradicen las cosas.

[JuJoGuAl]

Estoy probando haciendo 2 fondos uno 1174x768 y otro 768x1174 pero igual no me queda bien el JS que me enviaste pone el fondo en el BODY y lo pone FIXED, y mi fondo no viene del body si no de una div, y el Fixed no me gusta ese efecto (no es el que busco)

[JuJoGuAl]

Bueno lo que hice fue un PSD donde separe el Degradado del mapa asi poder jugar con el mapa y hacerlo mas pequeño, use el tamaño 1360 x 768 en la imagen y se ve mejor.

Claro le explique a mi cliente el problema de la pantalla vertical con un fondo horizontal y no me ha hecho comentario negativo asi que tomare eso como la solución al caso.

[pzin]

Iniciado por JuJoGuAl

Claro le explique a mi cliente [...] y no me ha hecho comentario negativo

Qué raro. Yo soy tú y sospechaba.

[JuJoGuAl]

Iniciado por pzin

Qué raro. Yo soy tú y sospechaba.

Jajajaja demasiado tarde ya critico ajajajja sigo adaptando.

Una pregunta Offtopic, alguna idea de hacer un sitio multidioma? sin el uso de BD ?

[fede5426]

Guardar el sitio traducido y ponerlo en una carpeta dentro del sitio original.. Digamos por ejemplo que en la carpeta "en" tenes un index creado en inglés y una carpeta con el resto de las páginas tambien en inglés, desde el sitio original colocas un boton que lleve a ese index...

No se si es la mejor forma realmente pero creo que podria ser una opcion.

[JuJoGuAl]

Iniciado por fede5426

Guardar el sitio traducido y ponerlo en una carpeta dentro del sitio original.. Digamos por ejemplo que en la carpeta "en" tenes un index creado en inglés y una carpeta con el resto de las páginas tambien en inglés, desde el sitio original colocas un boton que lleve a ese index...

No se si es la mejor forma realmente pero creo que podria ser una opcion.

Y Cual suguieres?

[pzin]

En RoR lo que se hace es tener las traducciones en archivos YAML y luego simplemente se llaman casi como si fueran variables. Es lo más limpio y fácil de mantener que he visto.

Podrías hacer algo así en cualquier lenguaje de lado servidor que uses.

[JuJoGuAl]

Eso seria usando xml? nunca he hecho una web multilenguaje.

[pzin]

Deberías de preguntar en el foro del lenguaje de lado servidor que uses.