1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Images to Background[JS]

Tema en 'Javascript' comenzado por AngelKrak, 13 de Septiembre de 2016.

  1. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.459
    Me gusta recibidos:
    669
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    upload_2016-9-13_12-14-41.png
    Hola amigos, esta vez les traigo un Tutorial de como Poner Imágenes como Background(SRC -> BACKGROUND)

    HTML:
    HTML:
    <div class="block"><img src="http://www.fongayrimenkul.com.tr/uploads/projeler/46634_free_boats_shutterstock_9167947_web.jpg"></div>
    Es Algo tan sencillo que puedes agregar solo la imagen sin el div y tambien funcionaria.

    CSS(Opcional):
    Código (CSS):
    .block {
      display: inline-block;
      border-radius: 3px;
      width: 220px;
      height: 220px;
    }

    .block img {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
    }
    Necesitas agregarle un width y height al contenedor o imagen para que el background se adapte al contenedor, tambien si quieres puedes asignarle propiedades al Background(Yo le puse solo el background size y no repeat)

    JS:
    Código (Javascript):
    var contador = document.querySelectorAll(".block").length;

    for (i = 0; i < contador; i++) {
      var img = document.querySelectorAll(".block img")[i].getAttribute("src");
      document.querySelectorAll(".block img")[i].style.backgroundImage = 'url("'+img+'")';
      document.querySelectorAll(".block img")[i].removeAttribute("src");
    }
    Aqui primero creamos una Variable que se encargara de Contar todos los Bloques/Imágenes que hay.
    Luego mediante un For() le asignamos la variable i que empiece de 0, luego que i sea menor que contador(esta es la variable que Conto los Bloques/Imágenes) seria algo asi 0 < 3 ya que la variable i empieza desde 0 y la variable contador contó 3 Elementos.
    y por Ultimo a la Variable i le sumamos mediante ++ para que llegue de 0 a 3

    Ahora dentro del for() creamos una Variable llamada img que se encargara de "Seleccionar" Todos las Imagenes mediante Numeros(Tipo Array) y después de Seleccionarlos obtenemos su SRC.
    Un Ejemplo de como se Veria Completo sin For:
    Código (Javascript):
    var img = document.querySelectorAll(".block img")[0].getAttribute("src");
    var img = document.querySelectorAll(".block img")[1].getAttribute("src");
    var img = document.querySelectorAll(".block img")[2].getAttribute("src");
    El se encarga de los Numeros por eso es que conto desde 0 hasta 3.

    Luego mediante:
    document.querySelectorAll(".block img").style.backgroundImage = 'url("'+img+'")';
    Seleccionamos Todos los Elementos otra vez y les asignamos el Style Background con el Atributo SRC obtenido de la Variable.

    y por Ultimo Removemos el Atributo SRC de la imagen para que solo quede el style background que se agrego.

    Demo:
    http://codepen.io/AngelKrak/pen/xEkjZY

    Descarga:
    http://codepen.io/AngelKrak/share/zip/xEkjZY/
     
    A cesarto1000 le gusta esto.
  2. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    511
    Me gusta recibidos:
    321
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Una cosa, que le veo lo malo, es que te pone unos bordes horribles xD Ni con border: none; ni con outline: none; te lo saca XD
     
  3. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.459
    Me gusta recibidos:
    669
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    eso se soluciona colocando la propiedad background al contenedor y eliminando la etiqueta img ;)
     
  4. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    511
    Me gusta recibidos:
    321
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Si, pero genera problema. Mira:

    Yo tengo esta imagen, y quiero hacer exactamente lo que me acabas de decir:

    [​IMG]

    Yo tengo esa altura en el DIV, gracias a la imagen, pero que pasa si le paso al div padre de esta imagen el source para ponerselo como background, y quito la etiqueta imagen, el div no se va a ver y va a general problemas en el diseño.
     
  5. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    511
    Me gusta recibidos:
    321
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Bueno, encontre la solución, pero no a todos les va a solucionar este código CSS.

    Tengo este código CSS que hace que tenga esas proporciones dependiendo del ancho del div (cada div mide 25% - 20px).

    [​IMG]

    Si yo ahora le pusiera 33.33% - 20px a cada div, quedaría de la siguiente forma:

    [​IMG]

    Como se puede ver, el tamaño es adaptable según el ancho, pero no todos quieren eso, pero por si acaso, para el que lo quiera.

    Código (CSS):
    element .elementimg{
        display: block;
        width: 100%;
        position: relative;
        padding-bottom: 100%;
        height: 0;
    }

    element .elementimg img{
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        object-fit: cover;
    }
    element: puede ser un article, section, etc.
    .elementimg: este es el elemento padre de la imagen, es decir el div que va a contener el fondo sacado del source de la imagen
    img: este es la imagen, claramente.

    Ahora el JQuery (No use la forma javascript):

    Código (Javascript):
    $(function(){
            $('element .elementimg img').each(function(){
                $(this).attr('src', function(){
                    var src = $(this).attr('src');
                    $(this).parent().attr('style', 'background: url('+src+') center center / cover no-repeat;').find('img').remove();
                });
            });
        });
    Bueno, edito para el que quiera la versión Javascript (La de AngelKrak no cambiaba todo, dejaba algunos vació, no se porque):

    Código (Javascript):
    var imagen = document.querySelectorAll('article .thumb img');

        for (var i=0; i<=imagen.length; i++) {
            var src = imagen[i].getAttribute('src');
            document.querySelectorAll('article .thumb')[i].setAttribute('style', 'background: url('+src+') center center / cover no-repeat;');
            imagen[i].remove();
            URLimagen(src[i]);
        }
       
     
    Última modificación: 15 de Septiembre de 2016
    A AngelKrak le gusta esto.

Comparte esta página