イメージをブラウザの向こうにフェイスブックバナーのように広げるが、今度は画像

Question

私はブラウザでどのように画像を作り、自分のウェブサイトをより大きなモニタで見ても画像が広がり、最後に空白を表示せずに拡張します。

Answer 1

あなたは基本的に2つの選択肢があります。

1. 幅全体を埋める繰り返しパターンを使用してください：あなたは

   width: 100%; background: url(your-image-file) repeat-x

2. 固定メイン画像と背景を使用してくださいを使用してこれを行うことができますが残りの領域を塗りつぶした塗りつぶし画像：背景は上記と同じコードを使用し、メイン画像は背景コンテナ内でimgになります。

Answer 2

さて、このコードを使用して余白をクリアしてください。

* {    
    margin: 0; 
    padding: 0; 
} 

スタイルシートまたはセクションでこれを使用すると、画像が空白なしですべて伸びることができます。

次に、歪んで見えない画像を作成したいと思うでしょう。これを行うには、はじめにかなり広いフォーマットで作成する必要があります。あなたは全体の背景を埋めるために探している場合、私は1028X768 px良いサイズを提案します。

最後に、コードの最後の部分を配置してすべて機能させるときです。

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

これは現在のすべてのブラウザ（IE8以下を除く）の近くで使用できます。あなたがまたがっしたいが、完全にカバーしていない奇数サイズの画像を配置するために

、私はイメージのための場所を作成し、width: 100%;を言う<div>にスタイルを追加する<div>を使用することをお勧めします。

これは高さでも行うことができます。

これが役に立ちます。