CSS

Question

这里我有一些 css 样式可以改变我网站所有网页的布局，包装宽度为 900 像素，header 和主要 body。到目前为止，我已经更改了 body 部分的背景颜色，效果很好。但是，如果我添加一些代码来更改背景图像，结果只是一个空白的白色背景，而不是我放置的图像。这是一个 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

结果是整个文件路径都在工作。

如此处所示：

正文{背景:url('E:/Documents/CRAFT412-Website/images/SiteBackground.png');}

CSS - 在网站 body 中添加背景图片无效。

CSS - Adding background images in the body of a website not working.

html

background-image

web