2

A continuación esta mi código , tengo un <div class="main">, un <div class="container"> y un carrusel en .

<div class="main">

    <div class="container" >
        <br>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox" >
                <div class="item active">
                    <img src="assets/images/ropa1.jpg"  width="200" height="200">
                </div>

                <div class="item">
                    <img src="assets/images/ropa2.jpg"  width="200" height="200">
                </div>

                <div class="item">
                    <img src="assets/images/ropa3.jpg"  width="100" height="180">
                </div>

                <div class="item">
                    <img src="assets/images/ropa4.jpg"  width="200" height="200">
                </div>
            </div>

                <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>

            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

Todo esta bien hasta que deseo implementar una imagen de fondo en mi div con clase "main" en la siguiente imagen se muestran inspeccionados los elementos.

introducir la descripción de la imagen aquí

El color naranja claro es el <div class="main"> el siguiente es el <div class="container"> que contiene el carrusel en , deseo poner una imagen muy colorida de fondo para poder visualizarla detrás pero no logro que aparezca y he intentado de muchas maneras pero no logro hacerlo, lo único que logro poner es un color pero no una imagen, mi codigo es el siguiente:

.main {

    background-image: url(assets/images/fondo1.jpg);
}

También intenté con una imagen web y logré colocarla pero solo en tipo mosaico y deseo que se muestre completa una sola imagen utilice este código.

    .main {

    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSg3O0NE7UMpDZghidkYpLmmE0Z8bleQbiI4ZkrxMa0rDzpYUHE");
}

Pero se visualiza así.

introducir la descripción de la imagen aquí

¿Puedo centrar o ampliar esta imagen para que aparezca en su totalidad en el div sin repetirse o simplemente aparecer la imagen de mis archivos locales igual sin repetirse? Cualquiera de las dos opciones me servirían.

4 respuestas 4

4

Intenta usando el style en el HTML en lugar aplicarlo en CSS [más ejemplos aquí].1

Intenta agregando esto a tu clase

class="carousel-inner" style="background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSg3O0NE7UMpDZghidkYpLmmE0Z8bleQbiI4ZkrxMa0rDzpYUHE) no-repeat left center; background-size: cover;" 
2
  • Muchisimas gracias este codigo me funciono! te lo agradezco mucho! el 16 abr. 2016 a las 18:59
  • Crees que sea posible incluir 'style="background:url(assets/images/fondo1.jpg)"'? lo intente y no lo logre, incluir una imagen local en una carpeta de escritorio? ya que esa imagen que utilizamos de prueba esta la web. el 16 abr. 2016 a las 19:06
2

Alejandro, en corto, puesto que se trata de un elemento 'full resposive', para darle solución hay que implementar, vía Jquery, (1) una función de ajuste de la altura en base a el ancho de slider; (2) trabajar con los eventos ‘slide.bs.carousel’ –que es el inicio del cambio de imagen en el slider- y ‘slid.bs.carousel’ –que se sucede al final del cambio- ; (3) e implementar una función de escalamiento de imagen, de acuerdo a las dimensiones del div padre y de la imagen en cuestión.

En largo.

1-. Una función que “deduzca”, en base al ancho del div padre de la imagen, la altura del mismo. Conseguido lo anterior, hay 'amarrar' esas dimensiones, para que (cuando llegue la imagen, sin importar el tamaño de la misma) el slider no varíe su altura.

Esta última función hay que incorporarla al evento resize --'$(window).on('resize', functon(){.... -- para que el slider permanezca 'full reponsive’.

    var $parentImgW = ' '
    var $parentImgH = ' ';
    var $myCarousel = $('#myCarousel')
    var $carouseItems =  $('.item');
    function $F_getAdjustImagesParents(){
        $parentImgW = $myCarousel.width(); // A
        $parentImgH =  ($parentImgW*9)/16; // B
        $carouseItems.height($parentImgH+'px').css('max-height',$parentImgH+'px'); //C
        console.log('$parentImgW ====> '+$parentImgW);
        console.log('$parentImgH ====> '+$parentImgH)
    };
   $F_getAdjustImagesParents();

    $(window).on('resize',function(){  // D
        $F_getAdjustImagesParents();
    });

2-. En el evento eventos ‘slide.bs.carousel’ –que es el inicio del cambio de imagen en el slider, como antes dijimos- vamos a obtener el número de ‘slide’ que va a entrar, el cual nos va a servir para, una vez que haya terminado la transición de la imagen –evento ‘slid.bs.carousel’-, saber de cuál imagen se van a obtener las dimensiones originales.

    $myCarousel.on('slide.bs.carousel', function(event) {// Start the slide’s change process
          var $slideNum = $("#"+event.relatedTarget.id).data('slide_num'); // F
          console.log('$lideNum ====> '+$slideNum)
          $myCarousel.on('slid.bs.carousel', function(event) {//end Start the slide’s change process
            var $imgW = $('#myCarouselSlideImage'+$slideNum).width(); //G
            var $imgH = $('#myCarouselSlideImage'+$slideNum).height(); //G
            console.log('$imgW ====> '+$imgW);
            console.log('$imgH ====> '+$imgH); ......

3-. Una vez que se tienen las dimisiones tanto del div padre como de la imagen, entonces ya podemos utilizar la función de escalamiento de imagen.

       ....
        var $result = ''; 
        $result = ScaleImage($imgW, $imgH, $parentImgW, $parentImgH, true); //H
        console.log('$result.width ====> '+$result.width);
        console.log('$result.height ====> '+$result.height);
        console.log('$result.targetleft ====> '+$result.targetleft);
        console.log('$result.targettop ====> '+$result.targettop);
        $('#myCarouselSlideImage'+$slideNum).animate({ // I
                                                  width:$result.width+'px',
                                                  height:$result.height+'px',
                                                  left:$result.targetleft+'px',
                                                  top:$result.targettop+'px'      },
                                                                300);
      });
   });

function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {

    var result = { width: 0, height: 0, fScaleToTargetWidth: true };

    if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
        return result;
    }

    // scale to the target width
    var scaleX1 = targetwidth;
    var scaleY1 = (srcheight * targetwidth) / srcwidth;

    // scale to the target height
    var scaleX2 = (srcwidth * targetheight) / srcheight;
    var scaleY2 = targetheight;

    // now figure out which one we should use
    var fScaleOnWidth = (scaleX2 > targetwidth);
    if (fScaleOnWidth) {
        fScaleOnWidth = fLetterBox;
    }
    else {
       fScaleOnWidth = !fLetterBox;
    }

    if (fScaleOnWidth) {
        result.width = Math.floor(scaleX1);
        result.height = Math.floor(scaleY1);
        result.fScaleToTargetWidth = true;
    }
    else {
        result.width = Math.floor(scaleX2);
        result.height = Math.floor(scaleY2);
        result.fScaleToTargetWidth = false;
    }
    result.targetleft = Math.floor((targetwidth - result.width) / 2);
    result.targettop = Math.floor((targetheight - result.height) / 2);

    return result;
}

Es necesario mencionar que para que todo esto funcione, hay que ajustar el parámetro de posición de la imagen a absoluto; y esto se debe hacer en Jquery, debido a que si se hace desde Css el slider no se desplegará correctamente.

    $('.myCarouselImgs').css('position','absolute'); // E

Puedes ver lo anterior funcionando en: https://jsfiddle.net/omarlin25/nd90r1ht/59/

Nota1: Lo anterior, fue una repuesta elaborada para una pregunta similar en la versión anglo. Puedes verla Aquí.

Nota2. La fuente, y explicación, de la función de escalamiento de imagen proviene de Aquí.

0

Sucede por que Bootstrap te lo impide ya que por la jerarquía del CSS los estilos de Bootstrap se toman primero. Lo que debes hacer es usar !important en tu CSS y este será tomado.

.main {
  background-image: url(assets/images/fondo1.jpg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

El background-repeat: no-repeat; evita el mosaico y el background-size: cover; obliga a la imagen a abarcar todo el espacio. Sino quieres esto, y solo quieres una imagen, centrada que no se repita ni abarque todo el espacio utiliza:

.main {
  background-repeat: no-repeat !important;
  background-position: top center !important;
}

O si quieres que solo se repita en Y:

background-repeat: repeat-y !important;

Espero te sirva, saludos.

1
  • Excelente muchísimas gracias por ayudarme a saber mas sobre bootstrap y su jerarquía el 19 abr. 2016 a las 20:32
0

no estás tan mal... quizás estás indicando mal la ruta. intenta:

.main {

    background-image: url(../assets/images/fondo1.jpg);
    background-size: 100%;
}

o quizás la ruta es ../images/fondo1.jpg pero dependerá de tu distribución

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.