Question

我正在尝试将背景图片添加到我的主页并使图像全屏显示。我使用的代码会在底部剪掉图像，我不明白为什么。

CSS Code used:
body {
        background-image: url(../images/background.png);
        background-size:100% auto;
        margin-bottom:;
        background-repeat:no-repeat;
    }

    HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Subconscious</title>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="maincontainer">

    <div id"header">
        <p>What is going on?</p>
    </div>
    <div id="nav">
    <a href="Index.html">Welcome</a>
    <a href="aboutMe.html">About Me</a>
    <a href="1.html">1</a> 
    <a href="2.html">2</a>
    <a href="3.html">3</a> 
    <a href="contactMe">Contact Me</a>
    </div>
    <div id="content">
    </div>
    <div id="footer">
    <p>hello</p>
    </div>
</div>
</body>
</html>

Answer 1

可能是因为你有这个margin-bottom:;。这将错误地呈现您的CSS。删除该行并使用background-size: 100%;再次尝试（如果这不起作用，您可以使用background-size: cover;。

在你忙的时候，也试试这个：

background-image: url(../images/background.png) no-repeat;

在这种情况下，您不必使用background-repeat。

Answer 2

Perfect Full Page Background Image

.full-page-bg
{
   background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

fiddle

祝你好运！

网站背景

2 个答案: