Joomla中的背景图像

我正在尝试创建一个类似this的网页（只是截图部分）。我试图按照该教程，加上其他互联网上，但他们似乎并没有工作。这是我的CSS代码：Joomla中的背景图像

/* 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);

部分似乎并没有出于某种原因。如果这是一个基本问题，道歉。

谢谢！

来源

2013-07-09 Has

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

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

，如果一切顺利，必须看到的图像。其次，你应该使用引号设置图像的路径。这意味着你必须更换为

background：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');

来源

2013-07-09 22:10:36

感谢您的回复队友。不幸的是它仍然无法正常工作。我尝试了所有你发布的不同版本。我还上传了一个不同的服务器上的图像进行查看：http://s21.postimg.org/9lywgsn07/St_Pauls.jpg是形象，这里是代码：体 { 颜色：＃333; background：url（'http://s21.postimg.org/9lywgsn07/St_Pauls.jpg'）; } 谢谢！ – Has

如果使用图像从远程服务器或与完整域名必须指定协议'HTTP：//'或'的https：//'实施例：'背景：网址（'http://s21.postimg.org/9lywgsn07/ St_Pauls.jpg'）;' –

不幸的是仍然没有运气。只是为了确认，我现在用的是云底的Joomla 2.0模板，进入模板管理器和editedcss/template.css – Has

你需要确保你的背景声明被应用到body元素：

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

你还需要检查你所指定的图像正确位于images目录

来源

2013-07-09 22:10:38 Reconfine

嗨，我它改为：“身体 { 颜色：＃333; 背景：网址（” ../images/St%20Pauls.jpg'）; } ' 还是行不通的不幸 – Has

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

来源

2013-07-09 22:11:27 ygesher

Joomla中的背景图像

回答

相关问题