Dicas de design CSS para fazer com que as imagens se ajustem a todos os dispositivos

ktemanuel · 29/01/2016

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.

Inserir CODE, HTML ou 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;
    }

eduar22nog · 30/01/2016

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%

Inserir CODE, HTML ou PHP:

 #bg {
        background-size: 2250px 100%;
        width: 6750px;
    }

capacho · 10/02/2016

Buenas noches. Cual es el problema exactamente?

ocurrencio · 11/02/2016

¿Has probado con background-size:cover? En cualquier caso siempre puedes hacer algunos ajustes en función del tamaño de pantalla.

Dicas de design CSS para fazer com que as imagens se ajustem a todos os dispositivos

ktemanuel

eduar22nog

capacho

ocurrencio