Question

我希望我的标题是全屏幕背景代码适用于我之前制作的其他网站，但现在它不起作用请帮忙。

其他网站上的代码相同。它有效。

这是我的html5和css3：

＆＃13;

body {
  margin: 0px;
  padding: 0px;
  font-family: roboto;
}

header {
  background: url('./pics/bg1.jpg') 50% 50% no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Welcome | SoundNet</title>
  <meta name="theme-color" content="#6699ff">
  <!--Meta-->
  <meta charset="utf-8">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1,  user-capable=yes">
  <!--Js-->
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <!--Link-->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300">
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <header>
    <div class="menu">
      <ul>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Playlists</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </div>
    <div class="logo">
      <span class="border-n">N</span>ESTA
      <div class="button">
        Sign Up
      </div>
    </div>
  </header>
  <section>
    <div class="party">
      <h3>Get the party started</h3>
      <p></p>
    </div>
  </section>
</body>

</html>

＆＃13;

[编辑：暂时添加了代码段但没有图片。]

Answer 1

为身体定义height。 100％高度和宽度采用其父高度和宽度。

由于您的身体没有宽度和高度，因此标题的100％高度和宽度不会产生任何影响。

<强>段

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

header {
  height: 100%;
  width: 100%;

  background: url('https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

<header></header>

我的全屏背景不起作用

1 个答案: