ブートストラップのヘッダーの全幅の背景イメージを設定する

私の質問は、ブートストラップのヘッダーの全幅と高さの背景イメージをhttp://demo.evenfly.com/view?theme=SantaGoのように設定するにはどうすればいいですか（アニメーションは期待していません。このような画面に）？私は終わりブートストラップのヘッダーの全幅の背景イメージを設定する

body{ 
    margin:0; 
    padding:0; 
    width:100%; 
} 

#jumboid{ 
    width:100% ; 

} 

.bg-image { 
    position: relative; 
} 
.bg-image img { 
    display: block; 
    width: 100%; 
    max-width: 1200px; /* corresponds to max height of 450px */ 
    margin: 0 auto; 

} 

header{ 
    width:100%; 
    height:100%; 
    height:calc(100% - 1px); 
    background-image:url('a.jpg'); 
    background-size:cover; 
}

：これは私がこれまでに行ったことある

、

https://codepen.io/anon/pen/reYRBo

HTML：

<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
    <link rel="stylesheet" href="sltac.css"> 
    </head> 
<body> 
<header> 
<div class="row"> 
<div class="bg-image" id="jumboid"> 
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back> 
</div> 
</header> 
</body> 
</html>

CSS経験（私はフルページのスクリーンショットを取る場合）

expected result

出典

2016-04-06 Kaw123

何か件までスケーリングされた画像の背景を維持するためにwan't？ http://www.bootply.com/108614 – Stuart

私は次のCSSがあなたの必要条件を満たすと思う。あなたは他のCSSを書く必要はありません。本文{ マージン：0; パディング：0; } – Batman

@Stuartはい、私は前にそれを試しましたが、画像は反応しません：/ – Kaw123

余分な画像タグを使用する必要はありません。ただ、背景とプロパティを設定しbackground-size: cover

はこのようにそれを試してみてください。

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat; 
 
    background-size: cover; 
 
}

<body> 
 

 
    <header> 
 

 
    </header> 
 
</body>

出典

2016-04-06 11:32:19

ありがとうあなたの答えは、これはちょっと私が欲しいのですが、ちょうどこれではありません。しかし私はこれを取るよ（Y） – Kaw123

こんにちは、このコードを試してみて、これはあなたが探しているものです、このような結果をecting。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#jumboid { 
 
    width: 100%; 
 
} 
 
.bg-image { 
 
    position: relative; 
 
    background: url("http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg") no-repeat center center /cover; 
 
    height: 450px; 
 
    background-attachment: fixed; 
 
} 
 
.bg-image img { 
 
    display: block; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 100%; 
 
    height: calc(100% - 1px); 
 
    background-image: url('a.jpg'); 
 
    background-size: cover; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
 
    <link rel="stylesheet" href="sltac.css"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <div class="row"> 
 
     <div class="bg-image" id="jumboid"> 
 
     </div> 
 

 
    </div> 
 
    </header> 
 
    <div class="restofthecontent"> 
 
    <p>your content</p> 
 
    </div> 
 

 

 

 

 

 
</body> 
 

 
</html>

出典

2016-04-06 11:28:13

返信ありがとう、画像の半分もあなたの実装で削除されました – Kaw123

あなたは#jumboid内imgタグを持っていますか？

場合によっては、background-imageと#jumboidで簡単に修正できます。

編集し、次のようにCSS：

#jumboid{ 
    width:100% ; 
    height: 100vh; 
    background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
}

（フォーク）例：https://codepen.io/pimskie/pen/wGPOar

出典

2016-04-06 11:28:27 Pimmol

CSSでない<img>タグにDIVの背景にイメージを入れてください。

と、CSSの下にそのDIVを指定します。

.Your_DV { 
background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg); 
background-position: fixed; 
background-size: cover; 
background-repeat: no-repeat; 
}

出典

2016-04-06 11:28:41

は単にcontainを使用して、使用し続けるあなたのBG-IMG拡張性とはresponsive-

background-size:contain;

または固定ヘッダヘイジを使用したい場合HTと、このようなヘッダのwidth-

background-size:100% 100%;

出典

2016-04-13 07:39:14

ブートストラップのヘッダーの全幅の背景イメージを設定する

答えて

関連する問題