CSS背景不显示

问题描述：

经过几年的休息后，我重新回到了网页设计中，因此之前我经常使用的很多技巧和窍门似乎并没有奏效。我正在为我的魔兽世界公会设计一个公会网站进行一些练习，但我遇到的问题是要让div背景图片在网页上正确显示。CSS背景不显示

该页面由一个容器DIV，一个标题DIV，一个菜单DIV和一个三列布局组成，后面跟着一个页脚div。在菜单上方，我有一个我怀疑的艺术背景，我设法让那一个出现;但是，我无法正确显示正确的图像以显示在左侧或右侧栏上方。我已经在网上搜索了一吨，并且我仍然不明白自己做错了什么。以下是对我有点想要的布局看起来像一个截屏：http://s19.postimage.org/7svzmuaf7/Layout_V2.jpg

目前，这是当你浏览网页的任何主要的浏览器是什么我越来越：http://cirquedufreak.net78.net/

显然有一些二者的差异，因为一个只是一个jpg，另一个是css/html组合，而且我知道。感谢您提供任何帮助。

源代码：

的index.php：

<?php 
session_start(); 
include("wowarmoryapi/BattlenetArmory.class.php"); 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Home - Cirque du Freak of Vashj</title> 
<link rel="stylesheet" type="text/css" href="layout.css" /> 
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
</head> 

<body> 
<div id="container"> 
    <div id="header">&nbsp;</div> 
    <div id="menu"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Roster</a></li> 
      <li><a href="#">Forums</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">Books</a></li> 
     </ul> 
    </div> 
    <div id="leftbar">LEFTBAR</div> 
    <div id="content"> 
     <div id="gmod"> 
      <h1>Important Message</h1> 
      <p>This is where any "breaking news" or important information that you want to give to the players will be displayed.</p> 
     </div> 
    </div> 
    <div id="rightbar"> 
     <p>For an invitation, contact one of the following players in game:</p> 
     <?php 

     ?> 
    </div> 
    <div id="footer">&copy;2012 Cirque du Freak Guild of Vashj; All Rights Reserved.<br />World of Warcraft and related images and materials are &copy; Blizzard Entertainment.</div> 
</div> 
</body> 
</html>

layout.css中：

@charset "utf-8"; 
/* CSS Document */ 

/* CSS LAYOUT BEGIN */ 
body { 
    margin: 0; 
    padding: 0; 
    background-color: #000; 
    color: #FC3; 
    text-align: center; 
} 
div#container { 
    margin: 0 auto; 
    text-align: left; 
    width: 1024px; 
    height: auto; 
} 
div#header { 
    width: 1024px; 
    height: 147px; 
    background: url(images/v2_header.png); 
} 
div#menu { 
    width:1024px; 
    height: 70px; 
    text-align:center; 
    background: url(images/v2_menuBG.png); 
} 
div#leftbar { 
    float: left; 
    width: 170px; 
    height: 525px; 
    min-heigh: 150px; 
    background-image: url(images/v2_barBG.png) no-repeat; 
    display: inline-block; 
    background-position: top left; 
} 
div#content { 
    float: left; 
    width: 684px; 
    min-height: 50px; 
    height: 525px; 
} 
div#rightbar { 
    float: right; 
    width: 170px; 
    height: 525px; 
    min-height: 50px; 
    background-image: url(images/v2_barBG.png) no-repeat; 
} 
div#footer { 
    width: 1024px; 
    height: 50px; 
    text-align: center; 
    clear: both; 
} 
/* CSS LAYOUT END */ 

/* CSS MENU BEGIN */ 
#menu ul { 
    margin: 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    width: 1024px; 
} 

#menu ul li { 
    display: inline; 
} 

#menu ul li a { 
    float: left; 
    text-decoration: none; 
    padding: 10.5px 11px; 
    width: 140px; 
    color: #FF0; 
    font-weight: bold; 
    font-size: 24px; 
    background-color: transparent; 
    vertical-align: text-bottom; 
} 
#menu ul li a:visited { 
    color: #FF0; 
} 
#menu ul li a:hover, #menu ul li .current { 
    color: #F00; 
    text-decoration: underline; 
    background-color: transparent; 
} 
/* CSS MENU END */ 

/* LEFT BAR CSS BEGIN */ 

/* LEFT BAR CSS END */ 

/* CONTENT BOX CSS BEGIN */ 
#content div#gmod { 
    width: 500px; 
    height: 150px; 
    text-align: center; 
    border: #FFF 3px solid; 
    background-color: #000; 
    margin: 0 auto; 
    color: #FFF; 
    overflow-style: auto; 
    overflow: scroll; 
    overflow-x: hidden; 
    padding-left: 4px; 
    padding-right: 4px; 
} 
#content div#gmod h1 { 
    text-align: center; 
    color: #F00; 
    font-size: 24px; 
    font-weight: bold; 
    text-decoration: underline; 
    padding: 0px 5px; 
/* CONTENT BOX CSS END */ 

/* RIGHT BAR CSS BEGIN */ 

/* RIGHT BAR CSS END */ 

/* FOOTER CSS BEGIN */ 
#footer { 
    color: #999; 
    text-align: center; 
} 
/* FOOTER CSS END */

非常感谢您在百忙之中帮我解决这个问题的时间。

答

不要使用

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

但

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

我以为我哈哈d之前曾尝试过这个答案，但我想不是。非常感谢您的快速回复。 – FireCrakcer37 2012-04-11 14:01:27

答

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

答

background-image: url(images/v2_barBG.png) no-repeat; < - 不重复，应seperatly声明如下：background-repeat: no-repeat;

CSS背景不显示

相关推荐