Прозрачность...

Здравствуйте. Подскажите как сделать прозрачность фона в новостях, и как сделать прокрутку сайта, чтобы background картинка оставалась на месте?
Примерно как здесь http://isengard.su/
Нет это не вкоем случае не реклама))) Просто здесь действительно пример хороший того что хочу. Помогите пожалуйста!

 

Прозрачность фона = прозрачность картинки-background в слое или таблице. Это, например, может быть .gif
А неподвижность фона body (это РАЗНЫЕ background-ы, не таблица или слой) задается в css НЕ-повторением no-repead

 

не no-repead, а no-repeat

 

Спс, буду ковыряться)

 

Я нашел и скачал этот шаблон как на том сайте, поставил...изначально там фон тоже двигается(( пытался разобраться, там куча css файлов.
Есть 4 bodystyle и 10 colorstyle.
Вроде нашел где именно влияет, добовляю no-repeat fixed center top, фон вообще непоказывает, а показывает цвет фона. Все черное.
Стиль платный да)) Но грех ненайти сворованый))) если выложу, поможете? или выложу поможете для bodystyle1 и colorstyle10 реализовать задуманое? или выложить эти 2 css файла?

 

Background картинка bg.jpg

Вот colorstyle10

Код (CODE):

1. /* style10 */
2.  
3. body {color: #666;background: #000;}
4. a {color: #D98A3A;}
5. a:hover {color: #fff;}
6. .contentheading, .componentheading {color: #999;}
7. h1 {color: #399BC9;}
8. h2 {color: #fff;}
9. h4 {color: #D98A3A;}
10. span.small, td.createdate, td.modifydate {color: #666;}
11. #body-bg {background: #000 url(../images/style10/bg.jpg) 50% 0 no-repeat;}
12. #bg-panel2 {background: url(../images/style10/bg2.png) 0 100% repeat-x;}
13. #top-bar {background: url(../images/style10/top-bar.png) 0 0 repeat-x;}
14. #banner-top {background: #000; border-bottom: 1px solid #2e2e2e;}
15. #topmenu-mod {color: #ccc;}
16. #banner-mod {color: #ccc;}
17. #date-block {color: #fff;}
18. .date1 {border-right: 1px dotted #BFBCC2;}
19. .date2 {color: #ddd;}
20. .date3 {color: #ddd;}
21. #showcasemodules, .rotator-module {color: #fff;}
22. #showcasemodules a, .rotator-module a {color: #D98A3A;}
23. #main-bar {background: #000 url(../images/style10/col-bgtop.png) 0 0 repeat-x;border: 1px solid #2e2e2e;}
24. #searchmod {background: url(../images/style10/search-bg.png) 0 0 no-repeat;}
25. #searchmod .inputbox {color: #999;}
26. .inner {background: #000 url(../images/style10/col-bgtop.png) 0 0 repeat-x;border-top: 1px solid #2e2e2e;border-left: 1px solid #2e2e2e;border-right: 1px solid #2e2e2e;}
27. .col-bottom {background: url(../images/style10/col-bl.png) 0 0 repeat-x;}
28. .col-bottom2 {background: url(../images/style10/col-br.png) 100% 0 no-repeat;}
29. .col-bottom3 {background: url(../images/style10/col-bm.png) 0 0 repeat-x;}
30. #bottom-menu {background: url(../images/style10/bottom-menu.png) 50% 0 repeat-x;}
31. #footer {background: #000 url(../images/style10/bottom-bg.png) 50% 0 repeat-x;}
32. #copyright {color: #666;}
33.  
34. .module h3, .moduletable h3, .submenu-block h3 {color: #999;}
35. #showcasemodules .module h3, .rotator-module .module h3 {color: #ccc;}
36. #showcasemodules .module h3 span, .rotator-module .module h3 span {color: #fff;}
37. .module h3 span, .moduletable h3 span, .submenu-block h3 span {color: #399BC9;}
38. #newsflash .moduletable {color: #fff;}
39. #bottom .module h3, #bottom .module h3 span {color: #399BC9;}
40. #banner-right .moduletable h3 span, #banner-left .moduletable h3 span {color: #fff;}
41.  
42. #horiz-menu li {color: #fff;}
43. #horiz-menu a, #horiz-menu .separator {color: #fff;}
44. #horiz-menu li a, #horiz-menu li .separator {color: #bbb;}
45. #horiz-menu li.active a, #horiz-menu li.active .separator {color: #fff;border-bottom: 1px solid #fff;}
46. #horiz-menu li a:hover, #horiz-menu li .separator:hover {color: #fff;}
47. #horiz-menu.splitmenu li a:hover, #horiz-menu.splitmenu li .separator:hover {border-bottom: 1px solid #fff;}
48. .menutop .animated-bg {border-bottom:1px solid #FFFFFF;}
49. .menutop .submenu-animation-left {background: url(../images/style10/sub-hover-l.png) 0 0 no-repeat;}
50. .menutop .submenu-animation-right {background: url(../images/style10/sub-hover-r.png) 100% 0 no-repeat;}
51. #horiz-menu ul ul li a, #horiz-menu ul li.active.parent ul a, #horiz-menu ul ul li .separator, #horiz-menu ul li.active.parent ul .separator {color: #bbb;}
52. #horiz-menu li.sfHover li a, #horiz-menu li:hover li a, #horiz-menu ul li.active ul li.active li a, #horiz-menu ul li.active.parent ul li a, #horiz-menu li.sfHover li .separator, #horiz-menu li:hover li .separator, #horiz-menu ul li.active.parent ul li .separator, #horiz-menu ul li.active.parent ul li .seperator {color: #fff;}
53. #horiz-menu ul ul {background: #000 url(../images/style10/col-bgtop.png) 0 0 repeat-x;border: 1px solid #2e2e2e;}
54. #horiz-menu ul ul li a.daddy, #horiz-menu ul ul li a.daddy:hover, #horiz-menu ul li.active.parent ul li a.daddy, #horiz-menu ul ul li .separator.daddy, #horiz-menu ul ul li .separator.daddy:hover, #horiz-menu ul li.active.parent ul li .separator.daddy {background: url(../images/style10/submenu-arrow.png) 95% 60% no-repeat;}
55.  
56. #topmenu-mod #mainlevel-top li {border-right: 1px dotted #fff;}
57. #topmenu-mod #mainlevel-top a, #banner-mod #mainlevel-top a#active_menu.mainlevel {color: #fff;}
58. #topmenu-mod .banner-small {color: #fff;}
59. #bottom-menu #mainlevel-bottom a {color: #666;}
60. #bottom-menu #mainlevel-bottom a:hover, #bottom-menu #mainlevel-bottom a#active_menu.mainlevel {color: #fff;border-bottom: 1px solid #fff;}
61.  
62. a.mainlevel {color: #ccc;background: url(../images/style10/submenu-arrow.png) 0 8px no-repeat;}
63. a.sublevel {color: #ccc;}
64. a.mainlevel:hover, a.sublevel:hover {color: #D98A3A;}
65. ul.menu li {border-bottom: 1px dotted #666;}
66. ul.menu li.active.parent ul {background: url(../images/style10/submenu-bgbottom.png) 0 100% repeat-x;}
67. ul.menu li.active.parent {background: url(../images/style10/submenu-bgtop.png) 0 0 repeat-x;}
68. ul.menu li span {background: url(../images/style10/submenu-arrow.png) 95% 50% no-repeat;}
69. ul.menu li.active.parent span {background: url(../images/style10/submenu-parent-arrow2.png) 95% 50% no-repeat;}
70. ul.menu li.active.parent a, ul.menu li.active.parent li.active.parent li.active a, ul.menu li.active.parent .separator, ul.menu li.active.parent li.active.parent li.active .separator {color: #D98A3A;}
71. ul.menu li.active.parent li a, ul.menu li.active.parent li.active.parent li a, ul.menu li.active.parent li .separator, ul.menu li.active.parent li.active.parent li .separator {color: #ccc;}
72. ul.menu li.active.parent a:hover, ul.menu li.active.parent .separator:hover {color: #fff;}
73. ul.menu a, ul.menu .separator {color: #ccc;}
74. ul.menu a:hover, ul.menu .separator:hover {color: #fff;}
75. ul.menu li.active a, ul.menu li.active li.active a, a#active_menu.mainlevel, a#active_menu.sublevel, a.mainlevel:hover, a.sublevel:hover, ul.menu li.active .separator, ul.menu li.active li.active .separator {color: #D98A3A;}
76. ul.menu li.active.parent ul li.active.parent a.daddy, ul.menu li.active.parent ul li.active.parent .separator.daddy {color: #D98A3A;}
77. ul.menu div.split-arrow-open {background: url(../images/style10/submenu-parent-arrow2.png) 65% 50% no-repeat;}
78. ul.menu div.split-arrow-close {background: url(../images/style10/submenu-parent-arrow.png) 65% 50% no-repeat;}
79. #main-body ul.menu a:hover, #main-body ul.menu .separator:hover {color: #333;}
80.  
81. a.readon {background: url(../images/style10/submenu-arrow.png) 0 5px no-repeat;}
82. a.readon2 {background: url(../images/style10/readon.png) 0 0 no-repeat;color: #ccc;}
83. a.readon2:hover {color: #fff;}
84. .pathway-block.top span.pathway {color: #fff;}
85. .pathway-block.top span.pathway a {color: #999;}
86. span.pathway {color: #666;}
87. .fontbutton-text {color: #ccc;}
88. fieldset {border-bottom: 1px solid #ddd;}
89. .tool-tip {background: #f6f6f6;border: 1px solid #e6e6e6;}
90.  
91. .module input.button, .moduletable input.button {background: url(../images/style10/readon.png) 0 0 no-repeat;color: #ccc;}
92. .module input.button:hover, .module input.button:hover {color: #fff;}
93. #sl_vert .button {background: url(../images/style10/readon.png) 0 0 no-repeat;color: #ccc;}
94. #sl_vert .button:hover {color: #fff;}
95. #sl_vert #sl_username, #sl_vert #sl_pass {background: url(../images/style10/input-bg.png) 0 0 no-repeat;}
96. #sl_vert input#mod_login_username, #sl_vert input#mod_login_password {color: #999;}
97. input#mod_login_username.inputbox, input#mod_login_password.inputbox, input#modlgn_username.inputbox, input#modlgn_passwd.inputbox {background: url(../images/style10/input-bg.png) 0 0 no-repeat;}
98.  
99. #rokslide-toolbar {color: #D98A3A;background: url(../images/style10/tabber-div.png) 0 100% repeat-x;}
100. #rokslide-toolbar li.current, #rokslide-toolbar li:hover {color: #fff;border-bottom: 1px solid #fff;}
101. .rotator-module .rok-content-rotator h2 a {color: #ccc;}
102. .rotator-module .rok-content-rotator h2 a.active {color: #fff;}
103. .rotator-module .rok-content-rotator h2 a:hover, .rotator-module .rok-content-rotator h2 a:hover.active {color: #fff;}
104. #newsflash .flashing{color: #999;}
105. #newsflash .controls img{background-image: url(../images/style10/news-scroller-controls.png);}
106.  
107. blockquote, pre {background: #111;border: 1px solid #222;}
108. span.number {color: #ccc;}
109. span.inset-right, span.inset-left {color: #ccc;}
110. span.dropcap {color: #ccc;}
111. span.important-title {color: #ccc;}
112. .important {border: 1px solid #ccc;}
113. span.important-title, span.important-title-blue, span.important-title-red, span.important-title-green, span.important-title-purple, span.important-title-orange, span.important-title-brown, span.important-title-grey {background: #000;}
114. ul.bullet-1 li {background: url(../images/typo/bullet-1a.png) 0 5px no-repeat;}
115. ul.bullet-2 li {background: url(../images/typo/bullet-2a.png) 0 5px no-repeat;}
116. ul.bullet-3 li {background: url(../images/typo/bullet-3a.png) 0 5px no-repeat;}
117. ul.bullet-4 li {background: url(../images/typo/bullet-4a.png) 0 5px no-repeat;}
118. ul.bullet-5 li {background: url(../images/typo/bullet-5a.png) 0 5px no-repeat;}
119. img.demo, img#variation_preview {border: 4px solid #333;}

Вот bodystyle1

Код (CODE):

1. #header-bar {background: url(../images/body/style1/header-bar.png) 0 0 repeat-x;}
2. img#logo {background: url(../images/body/style1/logo.png) 0 0 no-repeat;float: left;}
3. #showcase-top {background: url(../images/body/style1/showcase-tl.png) 0 0 no-repeat;}
4. #showcase-top2 {background: url(../images/body/style1/showcase-tr.png) 100% 0 no-repeat;}
5. #showcase-top3 {background: url(../images/body/style1/showcase-tm.png) 0 0 repeat-x;}
6. #showcase-main {background: url(../images/body/style1/showcase-middle.png) 0 0;}
7. #showcase-main2 {background: url(../images/body/style1/showcase-l.png) 0 0 repeat-y;}
8. #showcase-main3 {background: url(../images/body/style1/showcase-r.png) 100% 0 repeat-y;}
9. #showcase-bottom {background: url(../images/body/style1/showcase-bl.png) 0 0 no-repeat;}
10. #showcase-bottom2 {background: url(../images/body/style1/showcase-br.png) 100% 0 no-repeat;}
11. #showcase-bottom3 {background: url(../images/body/style1/showcase-bm.png) 0 0 repeat-x;}
12. #main-top {background: url(../images/body/style1/main-tl.png) 0 0 no-repeat;}
13. #main-top2 {background: url(../images/body/style1/main-tr.png) 100% 0 no-repeat;}
14. #main-top3 {background: url(../images/body/style1/main-tm.png) 0 0 repeat-x;}
15. #main {background: url(../images/body/style1/main-m.png) 0 0;}
16. #main2 {background: url(../images/body/style1/main-l.png) 0 0 repeat-y;}
17. #main3 {background: url(../images/body/style1/main-r.png) 100% 0 repeat-y;}
18. #main-bottom {background: url(../images/body/style1/main-bl.png) 0 0 no-repeat;}
19. #main-bottom2 {background: url(../images/body/style1/main-br.png) 100% 0 no-repeat;}
20. #main-bottom3 {background: url(../images/body/style1/main-bm.png) 0 0 repeat-x;}
21. #bottom-shadow {background: url(../images/body/style1/bottom-shadow.png) 50% 0 no-repeat;}
22. img#rocket {background: url(../images/body/style1/rocket.png) 0 0 no-repeat;}
23. span.pathway img {background: url(../images/body/style1/path-div.png) 0 50% no-repeat;}
24. a.large .button {background: url(../images/body/style1/font-lg.png) 0 0 no-repeat;}
25. a.small .button {background: url(../images/body/style1/font-sm.png) 0 0 no-repeat;}
26. .rok-content-rotator .arrow {background: url(../images/body/style1/rotator-active.png) 0 0 no-repeat;}

 

Да, точно ошибся, doctorgrif, спасибо за правку!

 

Ладно, а как сделать прозрачным фон новостей, там же по идее идет заливка сплошным цветом? как сделать изображением ?

 

добавить вместо сплошного цвета картинки-background прозрачные

 

SanSan прав, я так же делал, делаеш всё точно так же как и с обычными картинками только потом их делаеш альфой там под 20% и всё куль,кстати мнеформат .png вкатил больше чем .gif , незнаю почему, но в png так же можно делать прозрачный фон и качество у него лучше...

У меня ещё небольшой вопросик есть, заливать background знаю как, а залить есть 3мя вариантами: заливка картинкой что бы прилипло либо сверху либо снизу, и маленьким рисунком размноженный на весть сайт...! А можно их все три соеденить,можно но я немогу понять как,помогите.

 

kopj, ну закрутил, подробнее

 

да несказать уж...просто непонятно наверное написал...

Если проще,нужно что бы задний фон{background} состоял из:
Сверху картинка допустим с размерами 900х200, что бы она была всегда сверху
в серединке била заливка из какого нибуть маленькой картинки
и внизу прикреплялась картинка примерно с такими же размерами 900х200

Ну и соответственно когда страничка получалась бы большой,то растягивался бы только центральный фон...вот,можно же, но я немогу сообразить как. =(

 

kopj, z-index

 

мм... а можно подробней

 

z-index - это порядок слоя "в стопке"... ну, типа, как блины
Самый нижний "блин" имеет z-index=1, самый верхний = № сколько у тебя слоев сверху

 

а конструкция для среднего графического элемента
в цсс:
стиль для верха - с указанием привязки и выравнивания - все в топ
стиль для середины - см. ниже
стиль для нижней картинки - приклейка к низу

Код (PHP):

1. стиль для средней картинки {
2. background-image:url('../путь до кортинго/кортинго.расширение');
3. background-repeat:repeat; //повторяет картинку И по вертикали И по горизонтали
4. }

или

Код (PHP):

1. стиль для средней картинки {
2. background-image:url('../путь до кортинго/кортинго.расширение');
3. background-repeat:repeat-y;//повторяет картинку по вертикали
4. }

не рассмативается?

 

ну вот смотрите...
в css лежит

Код (html):

1. body#bd {
2.     color: #999999;
3.     background: url(../images/test.png) no-repeat center 0px #FFFFFF;
4.     padding: 0;
5.       margin: 20px 0 50px;

а в index

Код (html):

1. <body id="bd" class="<?php echo $tmpTools->getParam(JA_TOOL_SCREEN);?> fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?>" >

в сочитании этого, у меня на background, лежит та картинка test.png, размерами 900х200 приклепленная в самом верху, потом уже поверх неё лежит уже лототив,и задний фон меню.
Вот нодо всё как есть щас + средний фон заливки и снизу картинку

doctorgrif я Вас не совсем понял.

 

всё,разобрался спасибо =)