2016-04-10 5 views
1

私は私が思いついた、私はページを中心とした画像側(またはその背後)のいずれかを取得しようとしてきたいくつかのHTML/CSSを持っているが、私はどのようにわかりません。イメージは中央ページの後ろにありますか?中心ページの

悪い説明のために申し訳ありませんが、ここに私のコードは次のとおりです。

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 

     body { 
     background-image: url("/images/background.png") 
       } 

     #wrap { 
     width: 700px; 
     margin: 0 auto; 
     } 

     hr.one { 
     margin-top: 5px; 
     margin-bottom: 5px; 
     } 

    </style> 
    </head> 
    <body> 

    <title>ItzJavaCraft | Home</title> 

    <div id="wrap"> 

     <h1 align="center">ItzJavaCraft</h1> 
     <hr class="one"> 
     <p>More coming soon...</p> 

    </div> 

    </body> 
</html> 

私は左にbackground.png、ページの右側を取得できるようにしたいです。

P.S:私の申し訳ありませんが、ここで間違って何をやっている、私は新しいです。

すべてのヘルプは素晴らしいことです!

おかげで、

-ItzJavaCraft

答えて

0

ここでは、全角と背景の画面の高さは一つの画像を取得する方法です。

body { 
 
    background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
#wrap { 
 
    width: 700px; 
 
    margin: 0 auto; 
 
} 
 

 
hr.one { 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
}
<title>ItzJavaCraft | Home</title> 
 

 
<div id="wrap"> 
 

 
    <h1 align="center">ItzJavaCraft</h1> 
 
    <hr class="one"> 
 
    <p>More coming soon...</p> 
 

 
</div>

0

1つの単純なエラーがないディスプレイに背景を引き起こしてあります。もちろん、あなたは絶対パスを使用すると使用している、しない限り、相対URLは「/」(で始めるべきではありませんあなたのルートディレクトリを参照するシステム)。さらに、画像をページ全体に塗りつぶすには、background-sizeまたはbackground-repeatプロパティを使用する必要があります。あなたは「ラップ」要素は白のままにしたい場合は

は、あなただけ(あなたが探しているカバレッジを得るために必要な要素のサイズを調整する)その要素に背景色を追加することができます。

0

背景画像のプロパティは、要素のための1つまたは複数の背景画像を設定します。要素の背景は、要素の合計サイズです(パディングと境界線を含みますが、余白は含まれません)。デフォルトでは、背景画像は、要素の左上隅に配置され、両方の上下左右に繰り返されます。

ヒント:画像が が利用できない場合は、必ず背景色を設定してください。また

background-position 

は、あなたがそのようなジャック空白のコードの省略形を使用できますが、:

プロパティ:あなたは、背景画像内の位置を提供したい場合は、 はあなたのようないくつかのプロパティを使用することができますこれはあなたのために使用することは困難である場合、あなたは別のようなのためにそれを行うことができます。

完全な背景画像ページに:

background-position: cover; 

それとも、位置を変更したい場合は、例えばcenterleftright、およびtop

を使用することができます。

background-position: center top; 

または

background-position: left center; 

または

background-position: top center; 

など このプロパティについて詳しくは、次の例を参照してください。 http://www.w3schools.com/cssref/pr_background-image.asp

関連する問題