バックグラウンドイメージをフルページにするにはどうすればいいですか？

Question

私はあなたの場所の天気を表示する小さなWebアプリケーションを持っています。ページの背景には、たとえば曇り、雨、風などの天気の記述が反映されています。私はいくつかの画像を持っていますが、繰り返しはしないで全画面を表示するものはありません。私はそれを繰り返さないように設定する方法を知っています。ただし、画像の解像度がデスクトップのサイズと同じくらい大きくない場合は、画面が表示されません。背景画像を塗りつぶす/伸ばすように設定できますか？私はjquery/javascriptを通して天気の記述に応じて背景画像を設定しました。 live demo

ここでは、あなたの背景画像を設定しているcoverにbackground-sizeを設定CodePen

$(document).ready(function() { 
 
    $.getJSON('https://ipinfo.io', function(data){ 
 
    console.log(data); 
 
    $(".city").html(data.city +", " + data.region); 
 
    $(".ip-address").html(data.ip); 
 
    $(".geo-location").html(data.loc); 
 
    var loc = data.loc.split(","); 
 
     
 
    var city = data.city; 
 
    var region = data.region; 
 
    var country = data.country; 
 
     
 
    $("#loc").html(city+", "+region+". "+country); 
 
     
 
      var url = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat="+loc[0]+"&lon="+loc[1]+"&appid=8e1880f460a20463565be25bc573bdc6"; 
 
     
 
    $.getJSON(url, function(json) { 
 
// temperature is provided in kelvins conver to F or C 
 
     console.log(json); 
 
     var temp = Math.round(1.8 * (json.main.temp - 273) + 32); 
 
     var desc = json.weather[0].description; 
 
     var hum = json.main.humidity; 
 
     var wind = json.wind.speed; 
 
     
 
     $("#desc").html(desc); 
 
     $("#temp").html("Temperature "+temp+"F"); 
 
     $("#hum").html("Humidity : "+hum+" %"); 
 
     $("#wind").html("Wind: "+wind+"knots");  
 
     
 
//calculating time to display img depending wheather is day or night 
 
     var date = new Date(); 
 
     var today = date.getDate(); 
 
     var month = date.getMonth(); 
 
     var year = date.getFullYear();  
 
     $("#date").html(today+"/"+month+"/"+year); 
 
     
 
    var images = { 
 
    "clear sky": "http://pctechtips.org/weather/img/clear.jpg", 
 

 
\t "blue sky": "http://pctechtips.org/weather/img/clearsky.jpg", 
 

 
\t "stars": "http://pctechtips.org/weather/img/stars.jpg", 
 

 
\t "snow": "http://pctechtips.org/weather/img/snow.jpg", 
 

 
\t "rain": "http://pctechtips.org/weather/img/rain.jpg", 
 

 
\t "scattered clouds": "http://pctechtips.org/weather/img/clouds.jpg", 
 
    
 
    "thunderstorm": 
 
    "http://pctechtips.org/weather/img/thunderstorm.jpg"  
 
    }; 
 
    console.log((desc === "scattered clouds")); 
 
    var background = " ";  
 
     switch(desc) { 
 
     case "clear sky": 
 
      background = images["clear sky"]; 
 
      break; 
 
     case "snow": 
 
      background = images.snow; 
 
      break; 
 
     case "blue sky": 
 
      background = images["blue sky"]; 
 
      break; 
 
     case "rain": 
 
      background = images["rain"]; 
 
      break; 
 
     case "cloud": 
 
      background = images["cloud"]; 
 
      break; 
 
     case "thunderstorm": 
 
      background = images["thunderstorm"]; 
 
      break; 
 
     case "scattered clouds": 
 
      background = images["scattered clouds"]; 
 
      break; 
 
     default: 
 
      background = images["stars"];   
 
     } 
 
     
 
// setting background depending on weather description 
 
    $('body').css('background-image', 'url(' + background + ')'); 
 
     
 
}); 
 
}); 
 
});

body { 
 
    color: white; 
 
    background-image: url("http://pctechtips.org/weather/img/clearsky.jpg"); 
 
/*font-family: 'Michroma'; */ 
 
    
 
} 
 

 
#bg { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
\t 
 
    /* Preserve aspet ratio */ 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
} 
 
.container { 
 
    margin-top: 50px; 
 
} 
 

 
#loc { 
 
    margin-top: 80px; 
 
} 
 

 
/* setting up the transparent divs */ 
 
.transparent { 
 
    background-color: white; 
 
    color: black; 
 
    opacity: 0.5; 
 
    padding:10px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
} 
 

 
.test { 
 
    border-style: solid 
 
} 
 

 
.center { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-size: 50px; 
 
} 
 

 
h2 { 
 
    font-size: 30px; 
 
} 
 

 
p { 
 
    font-size: 14px; 
 
} 
 

 
#data { 
 
    color: black; 
 
    font-size: 18px; 
 
} 
 

 
#icon { 
 
    margin-top: 
 
}

<html> 
 

 
<head> 
 
<link href='https://fonts.googleapis.com/css?family=Michroma' rel='stylesheet'> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <h1 id="header-text" class="text-center">ZeroDegree</h1> 
 
    <h2 class="text-center">Local Weather Application</h2>  
 
    <div class="text-center "><h5 id="loc"></h5></div> 
 
    <div id="date" class="text-center"></div> 
 
    <div id="icon" class="text-center"><i class="wi wi-day-lighting"></i></div> 
 
    <div class="text-center"><h4 id="desc">Clear Sky</h4></div> 
 
    
 
    <div id="data" class="row center"> 
 
     <div id="temp" class="col-lg-2 offset-lg-3 col-md-2 offset-md-3 col-12 transparent text-center box ">Temperature 89F 
 
     </div> 
 
    <div id="hum" class="col-lg-2 col-md-2 col-12 transparent box ">Humidity 60% 
 
     </div> 
 
    <div id="wind" class="col-lg-2 col-md-2 col-12 transparent box">Wind 3.5Knots 
 
     </div> 
 
    </div>  
 
</div> 
 
</body> 
 
</html>

Answer 1

上のコードです。

body { 
    background-size: cover; 
} 

背景画像によっては、これが少し曇ったりぼやけて見えることがあります。したがって、最良の結果を得るためにファイルサイズと画質のバランスをとることが賢明です。

Answer 2

あなたは

Answer 3

まず...それは、彼らが最初にあるよりも、あなたのイメージが大きくなります場合、彼らは醜いと専門外の見えるだろう、まだbackground-size: cover

を使用することができ、あなたのWebページを作成する必要が利用可能に埋めます画面の高さ。したがって、HTML要素の高さを100％に設定します。

html { 
    min-height:100%; 
} 

（すなわち。あなたは、垂直スクロールバーを取得）あなたはheightを使用すると、ページが画面の高さを超えて成長している場合、HTMLの長さが成長しないので、私は分の高さのスタイルを使用していることに注意してください、これに合わせて、イメージが繰り返されます。

第2に、ページの本文とページの高さを一致させる必要があります。

body { 
    min-height:100%; 
} 

同じことがheight対min-heightのために再び行きます。

最後に、背景画像がページ全体を覆うようにします。だから、体のための最終的なCSSは両方のスタイルを含める必要があります。

body { 
    background-size: cover; 
    min-height:100%; 
} 

最後にもう一つの事はこれが唯一のCSS3をサポートするブラウザ上で動作する、注意することは - すべてのモダンブラウザが行うが、古いものはありません。