如何设置与所有设备和浏览器兼容的机身背景图像 [英] How to set background image of body compatible with all devices and browser
问题描述
我有网页。我已将背景图像添加到正文中。图像在桌面上正常显示，但不能在笔记本电脑和手机中显示。图像的小屏幕底部显示一半。
我尝试过：
身体{
背景：url（Blog-4-1400x699.jpg）无重复中心固定;
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
background-size：cover;
}
更新：
评论代码：
i have web page.In that i have added background image to body.The image is displaying properly in desktop but its not displaying in laptop and mobile.in small screen bottom of image is displaying half.
What I have tried:
body {
background: url("Blog-4-1400x699.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
UPDATE:
Code from comments:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="KarnatakaParcelViewer.Main" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Agriculture</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%-- Bootstrap Css Files--%>
<link href="jslogin/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="jslogin/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
<%-- jqueryui Css Files--%>
<link href="jslogin/jquery-ui/jquery-ui.css" rel="stylesheet" />
<link href="jslogin/jquery-ui/jquery-ui.theme.css" rel="stylesheet" />
<%-- Font-Awesome Css--%>
<link href="jslogin/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<%-- metisMenu css--%>
<link href="jslogin/metisMenu/metisMenu.css" rel="stylesheet" />
<%--Sb-Admin Css File--%>
<link href="jslogin/sb-admin/css/sb-admin-2.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<%--Jquery.js file--%>
<script src="jslogin/jquery/jquery-1.11.3.min.js"></script>
<%-- Bootstrap.js file--%>
<script src="jslogin/bootstrap/js/bootstrap.min.js"></script>
<%-- Metismenu js file--%>
<script src="jslogin/metisMenu/metisMenu.js"></script>
<script src="jslogin/jquery-ui/jquery-ui.js"></script>
<%-- SB-Admin.js file--%>
<script src="jslogin/sb-admin/js/sb-admin-2.js"></script>
<style>
.gradient {
background-image:
linear-gradient(
#4f7a93,#0f96e5
);
}
body {
/*background-size:120% auto;
background-image:url("Blog-4-1400x699.jpg");
background-repeat: repeat-x;*/
/*background: url(Blog-4-1400x699.jpg) no-repeat center center fixed;*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media (min-width: 750px) {
body {
background: url("Blog-4-750x200.jpg") no-repeat center center fixed;
}
}
@media (min-width: 1200px) {
body {
background: url("Blog-4-1200x550.jpg") no-repeat center center fixed;
}
}
@media (min-width: 1400px) {
body {
background: url("Blog-4-1400x699.jpg") no-repeat center center fixed;
}
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron gradient" style="padding:5px;margin:0px;border-radius:0;"/>
<h4 style="color:#ffffff;font-family: Verdana Arial;font-size:x-large;font-weight:600;">WELCOME TO AGRICULTURE WEB GIS PORTAL</h4> </div>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</div>
</div>
</form>
<footer>
<div class="col-md-2"></div>
<div class="col-md-6">
<%-- <h3 style="f</div> <div id=" editdialogplaceholder"=""></h3></footer>
推荐答案
您必须在css中指定媒体大小：
You will have to specify media size in your css:
body{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media (min-width: 750px){
body {
background: url("Blog-4-750x200.jpg") no-repeat center center fixed;
}
}
@media (min-width: 1200px){
body {
background: url("Blog-4-1200x550.jpg") no-repeat center center fixed;
}
}
@media (min-width: 1400px){
body {
background: url("Blog-4-1400x699.jpg") no-repeat center center fixed;
}
}
这是我发现的最佳方式
希望有所帮助^ _ ^
Andy
That's the best way I have found to do it
Hope that helps ^_^
Andy
这篇关于如何设置与所有设备和浏览器兼容的机身背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
