Question

在这里，我有一些css样式可以改变我网站所有网页的布局，包装内容为900px宽的标题和主体。到目前为止，我已经改变了身体部分的背景颜色，效果很好。但是，如果我添加一些代码来更改背景图像，结果只是一个空白的白色背景而不是我放的图像。这是一个JSFiddle：http://jsfiddle.net/o1snuexs/1/

这是我的CSS代码：

/*CSS FOR ALL PAGES*/

/*BODY/WRAPPER SECTION*/

body {background-image: url("SiteBackground.png");}

#wrapper {width: 900px;
          margin: 0 auto;
          background-color: white;}

/*TOP BANNER SECTION*/

#banner {background-color: black;}

#logo {margin-top: -90px;
       margin-bottom: -140px;
       text-align: center;}

#ip {margin-bottom: -55px;
     margin-right: 687px;
     float: right;
     color: white;}

#teamspeak_logo {margin-left: 764px;}

/*TOP NAV BAR SECTION*/

* {margin: 0px;
   padding: 0px;}

#nav_bar {background-color: #a22b2f;
          box-shadow: 0px 2px 10px;
          height: 45px;
          text-align: center;}

#nav_bar ul {padding: 0;}

#nav_bar > ul > li {display: inline-block;}

#nav_bar ul > li > a {color: white;
                      display: block;
                      text-decoration: none;
                      font-weight: normal;
                      padding-left: 10px;
                      padding-right: 10px;
                      line-height: 45px;
                      transition: all 0.5s ease;}

#nav_bar ul li ul {display: none;
                   list-style: none;
                   position: absolute;
                   background: white;
                   margin-left:0px;
                   box-shadow: 0px 2px 10px;
                   text-align: left;
                   z-index:1;}

#nav_bar ul li a.active-page {background-color: #8c1d20;}

#nav_bar ul li:hover ul li a {line-height: 2em;}

#nav_bar ul li a:hover {background: #8c1d20;}

#nav_bar ul li:hover ul {display: block;}

#nav_bar ul li ul li a {color: #252525;
                        display: block;}

#nav_bar ul li ul li a:hover {background: #4485f5;
                              color: white;}

/*BOTTOM FOOTER SECTION*/

#bottom_footer {height: 50px;
                border-top: solid 10px black;
                border-bottom: solid 10px black;
                margin-top: 20px;}

#created_by {text-align: center;
             margin: 17px;}

#social_media_youtube {float: left;
                       margin: -47px;
                       margin-left: 275px;}

#social_media_twitch {float: left;
                      margin: -44px;
                      margin-left: 335px;}

#social_media_twitter {float: right;
                       margin: -53px;
                       margin-right: 325px;}

#social_media_facebook {float: right;
                        margin: -47px;
                        margin-right: 285px;}

/*ELEMENT SELECTIONS SECTION*/

p {font-family: Arial, Helvetica, sans-serif;
   margin-left: 20px;
   margin-right: 20px;}

ul {font-family: Arial, Helvetica, sans-serif;
    margin-left: 37px;}

h3 {font-family: Arial, Helvetica, sans-serif;
    margin-left: 20px;}

h4 {font-family: Arial, Helvetica, sans-serif;
    margin-left: 20px;}

Answer 1

您的包装正在覆盖背景图像。从包装中删除背景颜色，它可以正常工作。

#wrapper {width: 900px;
      margin: 0 auto;
      background-color: white;}  <------remove this

Answer 2

工作正常。您必须重新检查在后台使用的图像的路径。其他一切都很好。

为我工作

[http://jsfiddle.net/vipin_raunchhela/3q51s4ja/1/][1]

Answer 3

事实证明，整个文件路径都在工作中。

如下所示：

body {background：url（'E：/Documents/CRAFT412-Website/images/SiteBackground.png'）;}

CSS - 在网站正文中添加背景图像。

3 个答案: