レスポンシブル・カバー・イメージ

私はこのような反応の良いバックグラウンドで私のウェブサイトのランディング・ページを作りたいと考えています（http://www.montere.it/?lang=en）。この例のウェブサイトでは、画面が小さくなると画像が自動的に中央に拡大されます。現在、これらのコードはありますが、機能しません。レスポンシブル・カバー・イメージ

body { 
 
    height: 100%; 
 
    background-image: url(bg.jpg); 
 
    background-size: 100% auto; 
 
} 
 

 
.title { 
 
    text-align: center; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 400px; 
 
    height: 100px; 
 
    color: white; 
 
    text-shadow: 
 
}

<body> 
 
     
 
     <div class="cover-wrapper"> 
 
      <div class="title"> 
 
       <h1>Angel Shih Design.</h1> 
 
      </div> 
 
     </div> <!-- cover-wrapper --> 
 
</body>

ありがとう！

出典

2016-05-18 Chicky Egg

あなたはスクリーンショットを投稿することができます。私はリンクをクリックし、すべてがうまくいくように見えました。 – EliTownsend

この使用して、ビューポート単位試してください：あなたのCSSにこれを追加

CSS

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

.cover-wrapper{ 
    display:block; 
    background: transparent url(bg.jpg) no-repeat center center /cover; 
    width: 100vw; 
    height: 100vh; 
} 


.title { 
    text-align: center; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 400px; 
    height: 100px; 
    color: white; 
    text-shadow: 
}

DEMO HERE

出典

2016-05-18 16:05:52

を：

background-attachment: fixed; 
background-size: cover; 
background-position: center center;

基本的にはすべてをカバーしたいです背景のある身体img、background-size：coverはそれを行うべきです。それは仕事ができるbackground-size: cover;とabsolute位置コンテナと

出典

2016-05-18 16:11:37 matmik

画面が小さくなると、bgが一番下に切り取られます。 –

申し訳ありません！ポジションを追加：バックグラウンドイメージには絶対的なもので、必要に応じて機能するはずです。そして、画像を上部に0：高さ：100％の位置に配置します。それがどうなるか教えてください。 – matmik

Vincent Gとまったく同じように言った。 – matmik

：

.cover-wrapper { 
    height: 100%; 
    background-image: url(http://lorempicsum.com/futurama/350/200/1); 
    position: absolute; 
    margin: auto; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-size: cover; 
}

Fiddle here

出典

2016-05-18 16:12:53

レスポンシブル・カバー・イメージ

答えて

関連する問題