Consejos de diseño CSS para hacer que las imágenes se ajusten a todos los dispositivos

  • Autor Autor ktemanuel
  • Fecha de inicio Fecha de inicio
K

ktemanuel

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
hola tengo el siguiente codigo css en mi web.... ya no se que editar para que la imagen se vea full en todos los dispositivos celu tablet etc.

Insertar CODE, HTML o PHP: 
/* BG */

    #bg {
        -moz-animation: bg 60s linear infinite;
        -webkit-animation: bg 60s linear infinite;
        -ms-animation: bg 60s linear infinite;
        animation: bg 60s linear infinite;
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    /* Set your background with this */


        background: #348cb2 url("http://forobeta.com/images/bg.jpg") bottom left;
        background-repeat: repeat-x;
        height: 100%;
        left: 0;
        opacity: 1;
        position: fixed;
        top: 0;
    }


    @-moz-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }


        100% {
            -moz-transform: translate3d(-2250px,0,0);
            -webkit-transform: translate3d(-2250px,0,0);
            -ms-transform: translate3d(-2250px,0,0);
            transform: translate3d(-2250px,0,0);
        }
    }


    @-webkit-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }


        100% {
            -moz-transform: translate3d(-2250px,0,0);
            -webkit-transform: translate3d(-2250px,0,0);
            -ms-transform: translate3d(-2250px,0,0);
            transform: translate3d(-2250px,0,0);
        }
    }


    @-ms-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }


        100% {
            -moz-transform: translate3d(-2250px,0,0);
            -webkit-transform: translate3d(-2250px,0,0);
            -ms-transform: translate3d(-2250px,0,0);
            transform: translate3d(-2250px,0,0);
        }
    }


    @keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }


        100% {
            -moz-transform: translate3d(-2250px,0,0);
            -webkit-transform: translate3d(-2250px,0,0);
            -ms-transform: translate3d(-2250px,0,0);
            transform: translate3d(-2250px,0,0);
        }
    }


    #bg {
        background-size: 2250px auto;
        width: 6750px;
    }
 
Que problema presentas exactamente?

Probé el código con otra imagen porque en mi equipo no llego a ver la que colocaste en el codigo. El problema que observé es que me aparece un salto en la parte superior cuando la pantalla ya es grande. Si ese es el problema que presentas, cambia en el background-size el auto por 100%

Insertar CODE, HTML o PHP: 
 #bg {
        background-size: 2250px 100%;
        width: 6750px;
    }
 
Buenas noches. Cual es el problema exactamente?
 
¿Has probado con background-size:cover? En cualquier caso siempre puedes hacer algunos ajustes en función del tamaño de pantalla.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba