2012-03-24 18 views
1

私は自分のウェブページを作ろうとしています。私はPhotoshopを使用してレイアウトを効果的に作成しました。これはPNGファイルです。HTMLの背景

質問:私はHTML/CSSを使用してこれをウェブサイトにどのように統合しますか? どのような種類のcssを編集しようとしました。

body { 
background-image:url('URLAddressHere'); 
} 

しかし、窓などを大きくすると、画像が壊れてしまいます。 背景がページサイズで適切に拡大縮小される方法はありますか?また、均一にしたい(繰り返しません) それとも間違っているのですか? CSS3プロパティは

body { 
    background-image:url('URLAddressHere'); 
    background-repeat:no-repeat; 
} 
+0

は、あなたのhtmlコードを表示します。 – slash197

+0

"div"を使用して背景イメージを囲み、この "div"外に色または繰り返しイメージを使用します。 – Mosijava

+0

http://stackoverflow.com/questions/376253/stretch-and-scale-css-background http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-background- with-css-only http://css-tricks.com/how-to-resizeable-background-image/ – hkulekci

答えて

0

はこれを試してみてくださいなど、基本的に私のメニューを持っているこの「イメージ」を実装することを意味していますサイズ。これにより、ブラウザの幅と高さに応じて背景のサイズが変更されます。私は以下のいくつかのリソースをリンクしています。また、リピートをオフにする必要があります。あなたのクラスに追加することもできますので、

http://www.css3.info/preview/background-size/

をお楽しみください:

background-repeat: no-repeat; 
background-size: cover; 
0

あなたが探していると呼ばれるバックグラウンド:どのように私は

おかげ

+0

これは、画像が拡大されるとすぐにかなり醜いものになります。 – ThiefMaster

+0

>高解像度の画像を得る。 (世界最悪の最適化)。 – nickw444

0

私はあなたがこのような何かをしたいと思います....

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; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')"; 
}