web-dev-qa-db-ja.com

画面の解像度に応じて背景画像を設定する

ユーザーが使用する画面解像度に応じて、Webページの背景画像を変更できるようにしたいと思います。

画面解像度が1200 * 600以上の場合、background = mybackground.jpg no-repeatまたはそれ以外。これどうやってするの？

imagebackgroundscreenresolution
23
prakasam

非常にうまく機能する純粋なCSSアプローチについて説明します here 。特に2つの手法が検討されており、CSS3に依存しないため、個人的には2番目の手法を好みます。

トラフィックのほとんど/すべてにCSS3対応ブラウザがある場合、最初の方法はより速く、より簡単に実装できます（便宜上、別の回答でZoidberg氏がコピー/貼り付けしましたが、 ソース =なぜ機能するかについてのさらなる背景）。

CSSの代替方法は、JavaScriptライブラリjQueryを使用して解像度の変化を検出し、それに応じて画像サイズを調整することです。 この記事 はjQueryテクニックをカバーし、ライブデモを提供します。

Supersized は、静的なフルスクリーン画像とフルサイズのスライドショー用に設計された専用のJavaScriptライブラリです。

フルスクリーン画像の良いヒントは、事前に正しい比率でそれらを拡大縮小することです。他の方法でsupersized.jsまたは1680x1050を使用する場合、通常1500x1000のサイズを目指し、写真のjpg品質を60-80％に設定し、品質をあまり犠牲にせずに可能な場合は100kb以下のファイルサイズにします。

23
Kynth

「ボディ背景画像コード」を削除してから、このコードを貼り付けてください

html { 
    background: url(../img/background.jpg) no-repeat center center fixed #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
9
Mr. Zoidberg

こんにちは、画面解像度に応じて背景画像srcを変更するjavascriptバージョンがあります。さまざまな画像を適切なサイズで保存する必要があります。

<html>
<head>    
<title>Javascript Change Div Background Image</title>        
<style type="text/css">    
body {
         margin:0;
         width:100%;
         height:100%;
}

#div1 {   
    background-image:url('sky.jpg');
    width:100%
    height:100%
}    

p {    
    font-family:Verdana;    
    font-weight:bold;    
    font-size:11px;    
}    
</style>    

<script language="javascript" type="text/javascript">
function changeDivImage()    
{   
//change the image path to a string   
var imgPath = new String();        
imgPath = document.getElementById("div1").style.backgroundImage;  

//get screen res of customer
var custHeight=screen.height;
var custWidth=screen.width;

//if their screen width is less than or equal to 640 then use the 640 pic url
if (custWidth <= 640)
    {
    document.getElementById("div1").style.backgroundImage = "url(640x480.jpg)";
    }

else if (custWidth <= 800)
    {
    document.getElementById("div1").style.backgroundImage = "url(800x600.jpg)";
    }

else if (custWidth <= 1024)
    {
    document.getElementById("div1").style.backgroundImage = "url(1024x768.jpg)";
    }

else if (custWidth <= 1280)
    {
    document.getElementById("div1").style.backgroundImage = "url(1280x960.jpg)";
    }

else if (custWidth <= 1600)
    {
    document.getElementById("div1").style.backgroundImage = "url(1600x1200.jpg)";
    }

else {
    document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
     }

    /*if(imgPath == "url(sky.jpg)" || imgPath == "")        
    {            
    document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";        
     }
    else        
     {            
     document.getElementById("div1").style.backgroundImage = "url(sky.jpg)";        
     }*/
}    

</script>
</head>
<body onload="changeDivImage()">            

<div id="div1">   

 <p>This Javascript Example will change the background image of<br />HTML Div Tag onload using javascript screen resolution.</p>    
 <p>paragraph</p>
</div>    

<br/>    

</body>
</html>
4
grace-bob

私はそれが古すぎる質問であることを知っていますが、答えようと思った、それは誰かを助けるかもしれない。 Twitterを見ると、これを達成するための非常にトリッキーですが、純粋なCSSアプローチが見つかります。

<div class="background"><img src="home-bg.png" /></div>
Applied CSS
.background {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 200%;
    left: -50%;
    position: fixed;
    width: 200%;}

.background img{
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    right: 0;
    top: 0;}

この背景画像はすべてのサイズに適合します。 iPadのポートレートビューも。常に中央で画像を調整します。ズームアウトした場合;画像は変わりません。

3
bhupen

私はこれと同じ問題を抱えていましたが、その解決策を見つけました。

トリックは、1920 * 1200の壁紙画像を作成することです。その後、この壁紙をさまざまなマシンに適用すると、Windows 7は最適なサイズに自動的にサイズ変更されます。

これが皆さんのお役に立てば幸いです

1
Dave Walker

Body cssを次のように設定します。

body { 
background: url(../img/background.jpg) no-repeat center center fixed #000; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

1
havefun

Cssファイルに入れます：

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; }

URL images/bg.jpg あなたの背景画像です

0
FMOYOTA