Question

好的，基本上它不会显示我的背景图像。我查看了所有其他帖子，但没有一个工作。这是代码。

这是Html。请注意，app.css和app.js只是重命名的引导程序文件。

＆＃13;

<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width-device-width, initial-scale=1" />
		<!-- Above is Important -->
		<meta name="description" content="HTML, CSS, BOOTSTRAP" />
		<meta name="author" content="James Mehltretter" />
		<title>Download Free HTML Templates</title>
		<link rel="stylsheet" href="app.css" type="text/css" />
		<script src="app.js" type="text/javascript"></script>
	</head>
	<body>
		
	</body>
</html>

＆＃13;

以下是我编辑过的CSS部分。

＆＃13;

body {
  margin: 0;
 background-image: url(background.png);

}

＆＃13;

JavaScript文件只是通用引导程序。这是我实际使用的文件的链接。

The Bootstrap JS

谢谢。

Answer 1

你的身体没有高度，也没有任何东西可以放置背景。

确保你的身体有一定的高度。

＆＃13;

body {
  margin: 0;
  background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
  background-size: 1440px 800px;
  height: 300px;
}

＆＃13;

Answer 2

检查图像background.jpg是否存在于包含您提供的CSS的目录的父目录中。

Answer 3

您是否在javascript控制台中的文件路径上出现404错误？也放弃了报价。别认为这是对的。我认为w3Schools是错误的。以下是Mozilla文档，其中没有显示网址引号：

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Answer 4

再次使用以下代码检查：

    body {
  margin: 0;
 background-image: url(../background.jpg);
 background-size: 1440px 800px;
}

Answer 5

如果您尝试让图片始终覆盖整个屏幕，请同时使用HTML或HTML和BODY。

请参阅完整页面上的工作代码段。

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d4/Tokyo_by_night_2011.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

＆＃13;

Answer 6

只要输入了height，图像就会显示出来。在此示例中，高度：100vh，这意味着它覆盖了整个屏幕。

body{
        background-image: url('https://image.freepik.com/fotos-kostenlos/gruene-wiese-hintergrund_1252-1098.jpg');
        height: 100vh;
    }

但是，最佳做法是将其设置为cover和no-repeat，这样即使屏幕大小也只能显示一次背景图像。

    body{
    	background-image: url('https://image.freepik.com/fotos-kostenlos/gruene-wiese-hintergrund_1252-1098.jpg');
    	background-size: cover;
    	background-repeat: no-repeat;
    	height: 100vh;
    }

Bootstrap背景图像

6 个答案: