Wie kann ich das Hintergrundbild nehmen die ganze Seite

Question

Ich habe eine kleine Web-App, die das Wetter an Ihrem Standort anzeigen. und der Hintergrund der Seite reflektiert die Wetterbeschreibung zB: bewölkt, Regen, Wind etc .. Ich habe mehrere Bilder, aber keine von ihnen nimmt den ganzen Bildschirm, ohne zu wiederholen. Ich weiß, wie man es auf keine Wiederholung setzt; Wenn jedoch die Bildauflösung nicht so groß ist wie die Desktopgröße, wird der Bildschirm nicht gefüllt. Ist es möglich, das Hintergrundbild zum Füllen/Strecken des Bildschirms einzustellen? Ich setze Hintergrundbild durch jquery/javascript je nach Wetterbeschreibung. live demo

Hier ist der Code auf 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

Stellen Sie den background-size-cover, wo Sie Ihr Hintergrundbild gesetzt haben.

body { 
    background-size: cover; 
} 

Abhängig von Ihrem Hintergrundbild dies kann es zu etwas trüben/verschwommen erscheinen. Es ist daher ratsam, für beste Ergebnisse zwischen Dateigröße und Bildqualität zu balancieren.

Answer 2

können Sie verwenden background-size: cover

Dennoch, wenn das Ihre Bilder macht größer, als sie ursprünglich sind, sie hässlich und unprofessionell aussehen ...

Answer 3

Zuerst müssen Sie Ihre Web-Seite, die zur Verfügung stellen füllen Bildschirmhöhe. Setzen Sie die Höhe des HTML-Elements also auf 100%.

html { 
    min-height:100%; 
} 

Beachten Sie, dass ich den min-height Stil verwendet haben, denn wenn man height verwenden und die Seite wächst über die Höhe des Bildschirms (dh. Sie eine vertikale Bildlaufleiste erhalten), wird die HTML-Länge nicht wachsen um es anzupassen - so wird das Bild wiederholt.

Zweitens müssen Sie den Körper Ihrer Seite mit der Höhe der Seite übereinstimmen.

body { 
    min-height:100%; 
} 

Das gleiche gilt wieder für min-height gegen height.

Schließlich das Hintergrundbild die gesamte Seite abdecken. So dass die endgültige CSS für den Körper soll beiden Stile umfasst:

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

Eine letzte Sache beachten Sie, dass dies nur auf Browser, die CSS3 unterstützen - die alle modernen Browser, aber ältere nicht.