如何从背景图像中删除空白区域?

时间:2015-01-19 13:57:03

标签: html css

我添加了猫头鹰旋转木马,我添加了滑块图像的背景图像。但它为所有浏览器的每个背景图像显示右侧的空白区域。我在下面尝试过以下代码:

<div class="main_slider">

<div id="owl-demo" class="owl-carousel owl-theme">

<div class="item active ad1">

    <div class="slider-inner">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="carousel-content">
                                <h2> <span>Lucayan</span> is the best  Onepage Travel template </h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  dolore magna incididunt ut labore aliqua. </p>       </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>                             

 <div class="item ad2">

   <div class="slider-inner">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="carousel-content">
                                <h2><span>Responsive </span> Designs  Onepage Travel template</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  dolore magna incididunt ut labore aliqua. </p>





                            </div>
                        </div>
                    </div>
                </div>
            </div>

</div> <!-- This is End of item ad2 -->

  </div> 

CSS:

#main_slider .item {
    display: block;
    width: 100%;
    height: 600px;
   background-repeat: no-repeat;
    background-size: cover; 
  -o-background-size: cover;
} 
.owl-carousel .item {
    display: block;
    width: 100%;
    height: 600px;   
    background-size: cover;  
  -o-background-size: cover;

}

.ad1{
  display: block;
  height: 600px;
  background:  url('../img/img1.jpg') no-repeat  fixed; 
 }

.ad2{
 display: block;
 width: 100%;
 height: 550x;
 background:  url('../img/img2.png') no-repeat ;
 background-size: cover;
 }

我已经给出100%的宽度,但仍然无法弄明白。我该如何删除它?!

这是my Fiddle

0 个答案:

没有答案