A continuación esta mi código html, tengo un <div class="main">
, un <div class="container">
y un carrusel en bootstrap.
<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.
El color naranja claro es el <div class="main">
el siguiente es el <div class="container">
que contiene el carrusel en bootstrap, 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 css 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í.
¿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.