Question

对于我的生活，我绝对无法弄清楚为什么我的背景图片不起作用。任何帮助解决这个问题都将非常感激。在CSS部分中，您将找到“Backg.jpg”。无论出于何种原因，即使把它作为一个png，以不同的名字命名，放入不同的文件夹，甚至放入html（身体的背景图像），它也拒绝出现。它目前被构造成一个名为“img”的文件夹。如果需要，我可以提供截图以更好地显示文件夹的方式。但我可以接近95％保证文件夹结构不是问题，除非我只是遗漏了一些关键的东西。

<!doctype html>
<html lang="">
    <head>
      <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <div id="socialmediaicons">
                    <img src="img/fb.png">
                    <img src="img/twitter.png">
                    <img src="img/g+.png">
                </div>
                <h1>COMPUTER</h1>
                <h3>Services for both home, and business</h3>
            </div>
        </div>
   </body>
</html>

和

@import url(https://fonts.googleapis.com/css?family=Martel+Sans);

* {
    padding: 0;
    border: 0;
    margin: 0;
    font-family: 'Martel Sans', sans-serif;
}
body {
    background-image: url(img/backg.jpg);
}
#wrapper {
    background-color: #ffffff;
    background-position-x: center;
    background-position-y: top;
    background-position: center top;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#socialmediaicons {
    width: 12%;
    margin: 0 auto;
}
#socialmediaicons img {
    width: 35px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
}
#header {
    border: 2px solid red;
}
#header h1 {
    text-align: center;
    font-size: 120px;
    padding-top: 25px;
    letter-spacing: 5px;
}
#header h3 {
    text-align: center;
    padding-top: 10px;
    font-size: 18px;
    padding-bottom: 10px;
}

可以找到文件结构 here

Answer 1

CSS文件中的URL与包含它们的CSS文件有关。

换句话说，您尝试从CSS加载的文件是：

/css/img/backg.jpg

将网址更改为绝对网址（FQDN和路径）或相对于CSS文件导航：

url( ../img/backg.jpg );

Answer 2

请从 #wrapper

中删除背景色

#wrapper {
    /*background-color: #ffffff;*/Remove or comment this line
}

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Martel+Sans);

* {
    padding: 0;
    border: 0;
    margin: 0;
    font-family: 'Martel Sans', sans-serif;
}
body {
    background-image: url(https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-17.jpg);
}
#wrapper {
    /*background-color: #ffffff;*/
    background-position-x: center;
    background-position-y: top;
    background-position: center top;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#socialmediaicons {
    width: 12%;
    margin: 0 auto;
}
#socialmediaicons img {
    width: 35px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
}
#header {
    border: 2px solid red;
}
#header h1 {
    text-align: center;
    font-size: 120px;
    padding-top: 25px;
    letter-spacing: 5px;
}
#header h3 {
    text-align: center;
    padding-top: 10px;
    font-size: 18px;
    padding-bottom: 10px;
}

＆＃13;

<html lang="">
    <head>
      <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <div id="socialmediaicons">
                    <img src="img/fb.png">
                    <img src="img/twitter.png">
                    <img src="img/g+.png">
                </div>
                <h1>COMPUTER</h1>
                <h3>Services for both home, and business</h3>
            </div>
        </div>
   </body>
</html>

＆＃13;

Answer 3

可能是拼写错误...尝试在<div>中手动添加它以查看它是否相应地读取。即：<img src="img/back.jpg">因为您将获得智能感知辅助，这应该是复制和粘贴CSS的正确途径。另一个尝试..只是将你的png文件转换为jpg ....也许是继承透明度或白色背景融化你的身体css ...让我知道如果有帮助。

Answer 4

Matt和Moishe都有一个观点，所以首先检查文件名和位置。在此之后，您会注意到由于您的包装ID而仍然无法正常工作：

#wrapper

它有100％的宽度/高度，它覆盖在你的身体上方位置：固定和顶部：0;左：0

如果删除该包装，您会发现它正确显示图像。

即使一切编码正确，我也无法工作

4 个答案: