Удалить белый зазор в фоновом режиме

Я хочу, чтобы иметь возможность складывать изображения на моем фоне и реагировать на фоновое изображение, поэтому я считаю, что контейнерная жидкость будет лучшим способом сделать это. Но на заднем плане есть белый пробел слева и справа: как я могу избавиться от него?Удалить белый зазор в фоновом режиме

<body> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

    </div> 


    <div class="collapse navbar-collapse header" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">Resume </a> </li> 
     </ul> 
    </div> 
    </div> 
</nav> 


<div class="container-fluid"> 

    <img class="img-responsive" src="images/background.jpg"> 

</div> 



</body>

Styling:

body { 
    margin:none; 
    padding:none; 

} 

/* CENTERS NAVBAR TEXT */ 
.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
} 

.navbar { 
    margin-bottom: 0px !important; 
}

https://jsfiddle.net/RyanGross1993/04ybbs2v/1/

источник

2016-08-02 Ryan G

Пожалуйста, добавьте код в jsfiddle. – Nehemiah

По крайней мере, предоставьте скриншот проблемы. И какой браузер вы используете? –

Вы должны поставить border: 0 и padding: 0 вместо none.

источник

2016-08-02 17:12:28

Если ваша цель установить полный отзывчивый фоновое изображение, вы можете попробовать это:

html { 
    background: url(images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Демо:https://jsfiddle.net/iRbouh/6vqm57bb/

Для получения более подробной информации о background-size см https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Я надеюсь, это поможет.

источник

2016-08-02 17:13:16

Он делает! Но, как бы я наложил изображение поверх фона? Я думаю об использовании предоставляемого img-класса, а также о запросах на медиа для настраиваемых полей? –

@RyanG Пожалуйста, взгляните на этот https://jsfiddle.net/iRbouh/6vqm57bb/ и скажите, хотите ли вы этого? –

только вы должны установить DIV с классом .row:

<div class="container-fluid"> 
    <div class="row"> 
    <img class="img-responsive" src="http://feelgrafix.com/data_images/out/12/859723-nature-background.jpg"> 
    </div> 
</div>

также вы можете использовать крышку для фона размера.

jsfiddle

источник

2016-08-02 17:33:12 miglio

Удалить белый зазор в фоновом режиме

ответ

Смежные вопросы