无法在Boilerplate模板中插入背景图片

Question

我刚开始搞乱Boilerplate模板。而且我无法让背景图片出现。

CSS：

body { 
font-size: 1em; 
line-height: 1.4; 
background-image: url (img/bg2.png); 
background-repeat: no-repeat; 

} 

一些有识之士将不胜感激我几乎是业余

谢谢:)

编辑：

完整的CSS这里：

/* 
* HTML5 Boilerplate 
* 
* What follows is the result of much research on cross-browser styling. 
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 
* Kroc Camen, and the H5BP dev community and team. 
*/ 

/* ========================================================================== 
    Base styles: opinionated defaults 
    ========================================================================== */ 

html, 
button, 
input, 
select, 
textarea { 
    color: #222; 
} 

body { 
font-size: 1em; 
line-height: 1.4; 
background-image:url("bg2.png"); 
} 

html body { 
background-image:url("bg2.png")!important; 
} 


/* 
* Remove text-shadow in selection highlight: h5bp.com/i 
* These selection rule sets have to be separate. 
* Customize the background color to match your design. 
*/ 

::-moz-selection { 
    background: #b3d4fc; 
    text-shadow: none; 
} 

::selection { 
    background: #b3d4fc; 
    text-shadow: none; 
} 

/* 
* A better looking default horizontal rule 
*/ 

hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #ccc; 
    margin: 1em 0; 
    padding: 0; 
} 

/* 
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 
*/ 

img { 
    vertical-align: middle; 
} 

/* 
* Remove default fieldset styles. 
*/ 

fieldset { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 

/* 
* Allow only vertical resizing of textareas. 
*/ 

textarea { 
    resize: vertical; 
} 

/* ========================================================================== 
    Chrome Frame prompt 
    ========================================================================== */ 

.chromeframe { 
    margin: 0.2em 0; 
    background: #ccc; 
    color: #000; 
    padding: 0.2em 0; 
} 

/* ========================================================================== 
    Author's custom styles 
    ========================================================================== */ 

#nav { 
    margin-left: -9px; 
    } 

.logo{ 
     display: block; margin-left: auto;margin-right: auto; margin-top:-300px; z-index:1; 
    } 


.center 
{ 
    margin: 0 auto; 
} 

#nav { 
    margin-left: -9px; 
} 

ul{ 
     list-style-type:none; margin-left:50px; padding:0; margin-top: 0px; 
    } 
    li{ 
     float:left; 
    } 
    li a:link,li a:visited{ 

     display:block; 
     height: 83px; 
     width:240px; 
     z-index:-1; 
     color:#ffffff; 
     background-color:#212121; 
     text-align:center; 
     padding:0px; 
     border: 0; 
    } 
    li a:hover,li a:active{ 
     background-color:#171616; 
    } 








/* ========================================================================== 
    Helper classes 
    ========================================================================== */ 

/* 
* Image replacement 
*/ 

.ir { 
    background-color: transparent; 
    border: 0; 
    overflow: hidden; 
    /* IE 6/7 fallback */ 
    *text-indent: -9999px; 
} 

.ir:before { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 150%; 
} 

/* 
* Hide from both screenreaders and browsers: h5bp.com/u 
*/ 

.hidden { 
    display: none !important; 
    visibility: hidden; 
} 

/* 
* Hide only visually, but have it available for screenreaders: h5bp.com/v 
*/ 

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

/* 
* Extends the .visuallyhidden class to allow the element to be focusable 
* when navigated to via the keyboard: h5bp.com/p 
*/ 

.visuallyhidden.focusable:active, 
.visuallyhidden.focusable:focus { 
    clip: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    position: static; 
    width: auto; 
} 

/* 
* Hide visually and from screenreaders, but maintain layout 
*/ 

.invisible { 
    visibility: hidden; 
} 

/* 
* Clearfix: contain floats 
* 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* `contenteditable` attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that receive the `clearfix` class. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

/* 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 

.clearfix { 
    *zoom: 1; 
} 

/* ========================================================================== 
    EXAMPLE Media Queries for Responsive Design. 
    These examples override the primary ('mobile first') styles. 
    Modify as content requires. 
    ========================================================================== */ 

@media only screen and (min-width: 35em) { 
    /* Style adjustments for viewports that meet the condition */ 
} 

@media print, 
     (-o-min-device-pixel-ratio: 5/4), 
     (-webkit-min-device-pixel-ratio: 1.25), 
     (min-resolution: 120dpi) { 
    /* Style adjustments for high resolution devices */ 
} 

/* ========================================================================== 
    Print styles. 
    Inlined to avoid required HTTP connection: h5bp.com/r 
    ========================================================================== */ 

@media print { 
    * { 
     background: transparent !important; 
     color: #000 !important; /* Black prints faster: h5bp.com/s */ 
     box-shadow: none !important; 
     text-shadow: none !important; 
    } 

    a, 
    a:visited { 
     text-decoration: underline; 
    } 

    a[href]:after { 
     content: " (" attr(href) ")"; 
    } 

    abbr[title]:after { 
     content: " (" attr(title) ")"; 
    } 

    /* 
    * Don't show links for images, or javascript/internal links 
    */ 

    .ir a:after, 
    a[href^="javascript:"]:after, 
    a[href^="#"]:after { 
     content: ""; 
    } 

    pre, 
    blockquote { 
     border: 1px solid #999; 
     page-break-inside: avoid; 
    } 

    thead { 
     display: table-header-group; /* h5bp.com/t */ 
    } 

    tr, 
    img { 
     page-break-inside: avoid; 
    } 

    img { 
     max-width: 100% !important; 
    } 

    @page { 
     margin: 0.5cm; 
    } 

    p, 
    h2, 
    h3 { 
     orphans: 3; 
     widows: 3; 
    } 

    h2, 
    h3 { 
     page-break-after: avoid; 
    } 
} 

HTML：

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width"> 

     <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 

     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <script src="js/vendor/modernizr-2.6.2.min.js"></script> 
    </head> 
    <body> 
     <!--[if lt IE 7]> 
      <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> 
     <![endif]--> 

     <!-- Add your site or application content here --> 
     <header> 
       <div class="center" id="nav"> 
         <img src="./img/head2.png" id="headb" /> 
         <img src="./img/logo2.png" id="logo" class="logo" /> 
       </div> 

     <nav> 

    <div class="center" id="nav"> 
    <ul class="center"> 
<li><a href="index2.html"><img src="img/homeY2.png" class="navI" /></a></li> 
<li><a href="forum.html"><img src="img/forum.png" class="navI" /></a></li> 
<li><a href="about2.html"><img src="img/about2.png" class="navI" /></a></li> 
<li><a href="media2.html"><img src="img/media2.png" class="navI" /></a></li> 
<li><a href="port2.html"><img src="img/port2.png" class="navI" /></a></li> 
<li><a href="store2.html"><img src="img/store2.png" class="navI" /></a></li> 
<li><a href="contact2.html"><img src="img/contact2.png" class="navI" /></a></li> 
<li><a href="home2.html"><img src="img/more.png" class="navI" /></a></li> 
</ul> 
    </div> 

</nav> 

</header> 



     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> 
     <script src="js/plugins.js"></script> 
     <script src="js/main.js"></script> 

     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
     <script> 
      var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; 
      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; 
      g.src='//www.google-analytics.com/ga.js'; 
      s.parentNode.insertBefore(g,s)}(document,'script')); 
     </script> 
    </body> 
</html> 

Answer 1

你没有括号在你的链接

body { 
font-size: 1em; 
line-height: 1.4; 
background-image: url ("img/bg2.png"); 
background-repeat: no-repeat; 

} 

Answer 2

出于某种原因，你似乎必须单独做出来，但这小提琴作品：

CSS：

body { 
    background-image: url('http://i.dailymail.co.uk/i/pix/2012/11/15/article-0-1609D0FF000005DC-373_964x641.jpg'); 
    background-repeat: no-repeat; 
} 

http://jsfiddle.net/VWbGq/

Answer 3

编辑：

请看到这个问题太：

Background Image not working with HTML5 Boilerplate

在CSS的路径是相对CSS文件它的自我。

css在哪里？在css文件夹中。包含图像的img文件夹在哪里？可能不在css文件夹中。

这意味着在你的CSS文件，你需要使用这样的路径：

url("../img/file.jpg); 

这意味着“去一个级别，寻找一个名为IMG的文件夹，里面去，给我file.jpg。”

你有你的路径的方式意味着img文件夹是在你的css文件夹，这可能并非如此。

Answer 4

从我在Firebug中可以看出的normalize.css现在覆盖背景。 （第72行）