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中的背景圖像

回答

相關問題