バックグラウンドで白い隙間を取り除く

バックグラウンドに画像を積み重ね、バックグラウンド画像に反応させたいと思っています。しかし、背景には、左右に白い隙間があります。どうすればそれを取り除くことができますか？バックグラウンドで白い隙間を取り除く

<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>

スタイリング：

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

少なくとも、問題のスクリーンショットを提供してください。そして、あなたはどんなブラウザを使っていますか？ –

あなたはnoneの代わりにborder: 0とpadding: 0を配置する必要があります。

出典

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/

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

を参照してくださいbackground-sizeの詳細についてこれが助けてくれるといいなあ

出典

2016-08-02 17:13:16

です！しかし、背景の上に画像を重ねる方法は？私はimg-responsiveクラスを使用することを考えています。調整可能なマージンのためのメディアクエリはありますか？ –

@RyanGこのhttps://jsfiddle.net/iRbouh/6vqm57bb/を見て、それがあなたが望むものなら教えてください。 –

あなただけがクラス.rowでのdivを設定する必要があります。

<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

バックグラウンドで白い隙間を取り除く

答えて

関連する問題