Joomla 中的背景图片

Question

我正在尝试创建一个类似this 的网页（只是截图部分）。我尝试按照该教程以及互联网上的其他教程进行操作，但它们似乎不起作用。这是我的 CSS 代码：

  /* CloudBase 2.0 overrides for Gantry Framework */

/* Basic styles */
body {color: #333;}

 background:url(../images/St%20Pauls.jpg);



#rt-header, #rt-bottom {color: #333333;}
.rt-container {background: #fff;} 
.rt-article a{text-decoration: underline;}
a:hover {color: #000; text-decoration: none;}
#rt-footer, #rt-copyright, #rt-copyright a {color: #333333;}
#rt-sidebar-a {background-color: transparent;}
#rt-sidebar-b {background-color: transparent;}
#rt-sidebar-c {background-color: transparent;}
#gantry-viewswitcher {margin: 0 auto 1em;position: relative;}
#rt-accessibility .button{
  padding: 0px;


}
#rt-accessibility .button, .rt-joomla .icon {
  background-image: url(../images/typography.png);
}

/* Layers structure */
#page-wraper{
  width: 998px;
  padding: 0px 37px;
  margin: 20px auto 0px auto;
  background: url(../images/background/shadow.png) 50% 0px no-repeat;
}
#in-page-wraper{  
  background: url(../images/background/bottom-shadow.png) center bottom no-repeat;
  padding-bottom: 51px;
}
#in-page-wraper-2{
  background: url(../images/background/content-background.png);
  border: 1px solid #fff;
  padding-top: 25px;
  padding-bottom: 25px;
  min-height: 500px;
}
.rt-container{
  background: none;
}
#rt-mainbody{
  background: #fff;

  margin: 0px;
  -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  padding: 6px;
  overflow: hidden;
}
#rt-mainbody .component-content{
  border: 1px solid #dcdcdc;
  padding: 15px;
  overflow: hidden;
}

background:url(../images/St%20Pauls.jpg);

部分似乎由于某种原因不起作用。如果这是一个基本问题，我们深表歉意。

谢谢！！

Answer 1

background 属性似乎不包含在任何 CSS 元素中。您需要将其插入到适当的 CSS 选择器元素中才能显示。目前该链接只是挂起，并未应用于文档的任何部分。

Answer 2

首先，您应该检查图像的路径。打开浏览器，输入网址为：

http://your_domain/../images/St Pauls.jpg

如果没问题，你必须看到图像。

其次，您应该使用引号来设置图像的路径。这意味着您必须替换为

背景：url('../images/St Pauls.jpg');

第三，最好使用不包含空格的文件名。

最后，您的 CSS 无效。它必须修复

/* CloudBase 2.0 overrides for Gantry Framework */

/* Basic styles */
body {
    color: #333;
    background: url('../images/StPauls.jpg');
    position: fixed;
}

#rt-header, 
#rt-bottom {color: #333333;}
.rt-container {background: #fff;} 
.rt-article a {text-decoration: underline;}
a:hover {color: #000; text-decoration: none;}
#rt-footer,
#rt-copyright,
#rt-copyright a {color: #333333;}
#rt-sidebar-a {background-color: transparent;}
#rt-sidebar-b {background-color: transparent;}
#rt-sidebar-c {background-color: transparent;}
#gantry-viewswitcher {margin: 0 auto 1em;position: relative;}
#rt-accessibility .button{ padding: 0px; }
#rt-accessibility .button,
.rt-joomla .icon {
    background-image: url('../images/typography.png');
}

/* Layers structure */
#page-wraper{
  width: 998px;
  padding: 0px 37px;
  margin: 20px auto 0px auto;
  background: url('../images/background/shadow.png') 50% 0px no-repeat;
}
#in-page-wraper{  
  background: url('../images/background/bottom-shadow.png') center bottom no-repeat;
  padding-bottom: 51px;
}
#in-page-wraper-2{
  background: url('../images/background/content-background.png');
  border: 1px solid #fff;
  padding-top: 25px;
  padding-bottom: 25px;
  min-height: 500px;
}
.rt-container{
  background: none;
}
#rt-mainbody{
  background: #fff;

  margin: 0px;
  -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  padding: 6px;
  overflow: hidden;
}
#rt-mainbody .component-content{
  border: 1px solid #dcdcdc;
  padding: 15px;
  overflow: hidden;
}

如果您仍然看不到图像，您可以尝试使用 background: url('/images/StPauls.jpg'); 或 background: url('images/StPauls.jpg');

Answer 3

您需要确保将您的背景声明应用于正文元素：

body {
  color: #333;
  background:url(../images/St%20Pauls.jpg);
}

您还需要检查您指定的图像是否正确位于图像目录中