2012-02-09 8 views
1

VS2010/C#を使用してASP.NET Webアプリケーションを開発しました。私は自分のページ(1400x1100)に大きな背景イメージを使用しました。解像度が1280x1024の場合、画像の幅はこの小さい幅に収まる必要があります。また、常に中央に配置する必要があります(水平に)。どのように達成できますか?背景画像のサイズを変更ASP.NETページの大きなイメージを中心に

おかげ

+2

http://css-tricks.com/perfect-full-page-background-image/ 多くのリソースがあります。いくつかの研究を行います。 – JSuar

答えて

3

一つの簡単なアイデアは...

<div style="position:fixed;z-index:2;"> 
content here 
</div> 

<div style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;"> 
    <img src="/img/YourBigImage.jpg" height="100%" width="100%" /> 
</div> 

アイデアは、私は他の上に1つのdivを配置することです。背景divは全ページに設定され、画像は100%高さと幅を使用してこのサイズに適合するように設定されます。私はそれを試して私のために働いていますが、コンテンツが大きすぎるか複雑な場合、バックグラウンドdivがどのようにフィットするか、あなたのコンテンツに何が起こっているのか分かりません。

+0

ありがとう私はそれを試してみます –

+0

+1それはクールで簡単な方法ですそれはちょうどうまくいった – Mubarek

+0

!すごくかっこいい –

1

は、純粋なCSSで可能ですが、browser supporting CSS3を必要とする - 要するにすべての「現代」のブラウザに加えて上記のIE9とを、IE8以下には、純粋なCSSの方法を意味しません。あなたはすでに利用可能なほとんどのプラグインを持ってjQueryのを使用してJavaScriptを使用する必要がIE8を含むクロスブラウザのソリューションを持っている

..あなたが必要な正確に何のように見えるそのうちの一つがこれです:

+0

ありがとう、JavaScriptのみを使用する方法はありますか? –

+0

@Ali_dotNet確かに、jQuery **は** JavaScriptですが、たくさんのコードを書く必要があります。おそらく何百、何千もの行を書く必要があります。 –

+0

@Aristosありがとう、削除されました。 :) –

1

あなたはCSS 3メディアクエリを使用して操作することができます

コードは次のように行くことができます:

@media screen and (min-width: 1024px){ 

.div{background:url(''); width:###px;} 


} 
@media screen and (max-width:1023px){ 

.div{background:url(''); width:###px;} 

} 

、あなたはjQueryライブラリを使用することができ、すべてのブラウザでそれを使用するためには、すべてのブラウザでサポート作るために

関連する問題