如何使背景图片占据整页
[英]how can I make the background image take the full page
问题描述
I have a small web app that display the weather on your location. 
我有一个小型网络应用程序，可以显示您所在位置的天气。 and the background of the page reflects the weather description eg: cloudy, rain, wind etc.. I have several images, but none of them take the full screen without repeating. 页面的背景反映了天气的描述，例如：多云，下雨，风等。我有几张图像，但是没有一张全屏显示无需重复。 I know how to set it to no-repeate; 我知道如何将其设置为“无重复”。 however, if the image resolution is not as big as the desktop size it will fall short of filling the screen. 但是，如果图像分辨率不如桌面尺寸大，它将不足以填满整个屏幕。 Is it possible to set the background image to fill/stretch screen. 是否可以将背景图像设置为填充/拉伸屏幕。 I set background image through jquery/javascript depending on weather description. 我根据天气描述通过jquery / javascript设置背景图像。 live demo 现场演示
Here's the code on CodePen 这是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", "blue sky": "http://pctechtips.org/weather/img/clearsky.jpg", "stars": "http://pctechtips.org/weather/img/stars.jpg", "snow": "http://pctechtips.org/weather/img/snow.jpg", "rain": "http://pctechtips.org/weather/img/rain.jpg", "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; /* 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>
3 个解决方案
解决方案1
2 2017-06-29 23:02:59
First, you need to make your web page fill the available screen height. 首先，您需要使网页填充可用的屏幕高度。 So, set the HTML element height to 100%. 因此，将HTML元素的高度设置为100％。
html {
min-height:100%;
}
Note, that I have used the min-height style because if you use height and the page grows beyond the height of the screen (ie. you get a vertical scroll bar), the html length will not grow to match it - so the image will repeat. 请注意，我使用了min-height样式，因为如果您使用height ，并且页面超出屏幕的高度（即，您获得垂直滚动条），则html的长度将不匹配它-因此图像将重复。
Second, you need to make the body of your page match the height of the page. 其次，您需要使页面的主体与页面的高度匹配。
body {
min-height:100%;
}
The same thing goes again for min-height versus height . min-height与height 。
Finally, make the background image cover the entire page. 最后，使背景图像覆盖整个页面。 So the final css for the body should include both styles: 因此，最终的CSS CSS应该包含两种样式：
body {
background-size: cover;
min-height:100%;
}
One final thing to note, this will only work on browsers that support CSS3 - which all modern browsers do, but older ones don't. 最后要注意的一点是，这仅适用于支持CSS3的浏览器-所有现代浏览器都支持，而较旧的浏览器则不支持。
解决方案2
0 2017-06-29 22:49:07
Set the background-size to cover where you have set your background image. 设置background-size以cover设置背景图像的位置。
body {
background-size: cover;
}
Depending on your background image this can cause it to appear a bit cloudy/blurred. 根据您的背景图像，这可能会使它显得有些混浊/模糊。 So it is wise to balance between file-size and image quality for best results. 因此，在文件大小和图像质量之间取得平衡是明智的。
解决方案3
0 2017-06-29 22:49:18
You can use background-size: cover 您可以使用background-size: cover
Still, if that makes your images larger than they are originally, they will look ugly and unprofessional... 尽管如此，如果这会使您的图像比原始图像大，它们将看起来丑陋且不专业。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.