Html 如何使背景图像适合任何屏幕？_Html_Css

Html 如何使背景图像适合任何屏幕？

html css

Html 如何使背景图像适合任何屏幕？,html,css,Html,Css,HTML <!doctype html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Coming Soon</title> <link href="css/Main.css" rel="styleshee

HTML

<!doctype html>

<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Coming Soon</title>
  <link href="css/Main.css" rel="stylesheet">

</head>


<body>

  <section class="content">

    <div style="width:500px;
                    margin:0 auto;
                    top:25%;
                    position:relative">

      <img src="img/logo.png">
      <img src="img/line.png">
      <p class="header large-2 white padding-top-triple">Coming This Fall 2015</p>
      <p class="white padding-top"><span class="header">Email: </span>
        <a href="mailto:Jethwa96@hotmail.co.uk">
          <my-email data-user="Jethwa" data-domain="jedesigns.uk"></my-email>
        </a>
      </p>

    </div>

  </section>
</body>

</html>

我需要知道如何在任何屏幕设备上完全匹配背景图像，使其对任何设备都有响应

我尝试了很多方法，但都没有成功，所以希望stack overflow的人能帮上忙：）

你需要使用

背景尺寸：cover

，但要正确。这意味着为你的

.content

（并将其添加到所有家长，包括

html

）提供100%的高度，基本上：

html, section {height:100%;}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    background: #fff;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

/* Structure */


.content{
    width: 100%;
    position: relative;
    height: 100%;
    margin: 0 auto;
    border: 3px solid #fff;
    background:url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
    background-size:cover;
    background-position:center, bottom;
}

.content img {
   /* max-width: 100%;*/

}

我还删除了您添加的内联样式

.content img

是错误的css，因为html中没有任何要调用的

user property“background size:cover”只需在cssTried中执行

img{background size:cover；}

此操作不起作用，非常感谢：）修复了此问题

html, section {height:100%;}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    background: #fff;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

/* Structure */


.content{
    width: 100%;
    position: relative;
    height: 100%;
    margin: 0 auto;
    border: 3px solid #fff;
    background:url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
    background-size:cover;
    background-position:center, bottom;
}

.content img {
   /* max-width: 100%;*/

}