Фоновое изображение в 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

Прежде всего, вы должны проверить путь к изображению. Откройте браузер и введите URL, как:

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

Answer 2

Вам нужно будет убедиться, что ваш фон декларации прикладывается к элементу тела:

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

вы также должны убедиться, что изображение, которое указано правильно находится в каталоге изображений

Answer 3

Атрибут background не содержит ни одного элемента CSS. Вам нужно вставить его в соответствующий элемент селектора CSS, чтобы он отображался. В настоящий момент ссылка просто висит, не применяется к какой-либо части документа.