Question

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>

CSS

/* Typography */

.header {
  font-family: "futura-pt", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1.0em;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
p {
  font-family: "futura-pt", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.0em;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/* Sizes */

.large-5 {
  font-size: 5.0em;
}
.large-4 {
  font-size: 4.0em;
}
.large-3 {
  font-size: 3.0em;
}
.large-25 {
  font-size: 2.5em;
}
.large-2 {
  font-size: 1.5em;
}
.large-15 {
  font-size: 1.3em;
}
@media screen and (min-width: 768px) {
  .large-5 {
    font-size: 5.0em;
  }
  .large-4 {
    font-size: 4.0em;
  }
  .large-3 {
    font-size: 3.0em;
  }
  .large-25 {
    font-size: 2.5em;
  }
  .large-2 {
    font-size: 2.0em;
  }
  .large-15 {
    font-size: 1.5em;
  }
}
/* Colours */

.white {
  color: #fff;
}
.black {
  color: #000;
}
/* Spacing */

.padding-top {
  padding-top: 2em;
}
.padding-top-double {
  padding-top: 2em;
}
.padding-top-triple {
  padding-top: 1em;
}
.padding-bottom {
  padding-bottom: 1em;
}
/* Links */

a:link,
a:visited,
a:active {
  color: #fff;
  text-decoration: none;
}
a:hover {
  color: #fff;
  text-decoration: underline;
}
/* General */

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: 1200px;
  margin: 0 auto;
  border: 3px solid #fff;
  background: url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
}
.content img {
  max-width: 100%;
}
my-email::after {
  content: attr(data-domain);
}
my-email::before {
  content: attr(data-user)"\0040";
}

我需要知道如何在任何屏幕设备上完全适合背景图像，以便对任何设备做出响应。

我尝试了很多方法，但它没有用，所以希望堆栈溢出的人可以帮助:)

Answer 1

你需要使用background-size:cover，但要正确。这意味着为您的.content提供100％的高度（并将其添加到所有父母，包括html）基本上：

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中没有任何<img>可以调用。

JSFIDDLE

我如何将背景图像适合任何屏幕？

1 个答案: