Moja pozadina trenutno je sastavljena od niza sličica veličinine 2x150px poređani vertikalno jedna do druge sa nastavkom određene boje nadole... ja bih želeo da je ona sastavljena od niza slika određene širine i dužine, poređanih horizontalno jedna ispod druge, tako da sa jedne strane budu poređane jedne slike (iste) a sa druge strane druge slike, ili jednostavno da se pozadinska slika nalazi iza foruma (i ostalih stranica) pa da se sa leve strane prikazuje njen levi kraj a sa desne njen desni kraj... kao na sajtu www.survivor.rs
moj style.css izgleda ovako:
html {
height: 100%;
margin-bottom: 1px;
}
/* Normal, standard links. */
a:link, a:visited {
color: #387cb3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited {
color: #000000;
text-decoration: none;
}
a.nav:hover {
color: #cc3333;
text-decoration: underline;
}
/* Tables should show empty cells. */
table {
empty-cells: show;
}
/* By default (td, body..) use verdana in black. */
body, td, th, tr {
line-height: 140%;
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #444;
font-size: 12px;
}
/* The main body of the entire forum. */
body {
background: #242424;
padding: 0;
margin: 0;
}
/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button {
color: #000000;
font-family: verdana, sans-serif;
}
input, button {
font-size: 100%;
}
textarea {
font-size: 100%;
color: #000000;
font-family: verdana, sans-serif;
}
/* All input elements that are checkboxes or radio buttons. */
input.check {}
/* Selects are a bit smaller, because it makes them look even better 8). */
select {
font-size: 100%;
font-weight: normal;
color: #000000;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor {
height: 1px;
border: 0;
color: #dcdcdc;
background-color: #ddd;
}
/* No image should have a border when linked */
a img {
border: 0;
}
/* A quote, perhaps from another post. */
.quote {
background-color: #eaeff3;
color: #333;
text-decoration: none;
font-style: italic;
font-weight: bold;
font-size: 11px;
line-height: 1.2em;
padding: 5px;
border-top: 2px solid #387cb3;
border-bottom: 2px solid #387cb3;
margin: 5px auto 10px;
padding: 5px;
/*width: 99%;*/
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}
/* A code block - maybe even PHP ;). */
.code {
color: #333;
background-color: #eaeff3;
font-family:Monaco,'Courier New',monospace;
font-size: 11px;
line-height: 1.3em;
border-top: 2px solid #387cb3;
border-bottom: 2px solid #387cb3;
margin: 5px auto 10px;
padding: 5px;
/*width: 99%;*/
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}
/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader, {
color: #282828;
text-decoration: none;
font-style: italic;
font-weight: bold;
font-size: 11px;
line-height: 1.2em;
padding: 5px;
}
/* Generally, those [?] icons. This makes your cursor a help icon. */
.help {
cursor: help;
}
/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction {
color: red;
}
/* The main post box - this makes it as wide as possible. */
.editor {
width: 96%;
}
/* Highlighted text - such as search results. */
.highlight {
background-color: yellow;
font-weight: bold;
color: black;
}
/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg {
background: #f9f9f9;
}
.windowbg2 {
background: #fff url(images/windowbg2.png) 0 100% repeat-x;
border-bottom: solid 1px #fff;
}
.windowbg3 {
background: #efefef;
}
.windowbg_sticky {
background: #f1f1f1;
}
.windowbg4 {
background: #fcfcfc;
border: solid 1px #eaeaea;
margin-bottom: 2px;
padding: 2px;
text-align: center;
color: #3f3f3f;
width: 94%;
}
/* the today container in calendar */
.calendar_today {
background: #ededed;
}
/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td {
color: #ededed;
font-style: normal;
background: #143A59 url(images/titlebg.png) repeat-x;
border-bottom: solid 2px #67A0CF;
padding-left: 10px;
padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited {
color: #ededed;
font-style: normal;
}
.titlebg a:hover {
text-decoration: underline;
}
.titlebg tr, .titlebg2 td {
color: #dedede;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited {
color: #dcdcdc;
font-style: normal;
text-decoration: underline;
}
.titlebg2 a:hover {
color: #b2b2b2;
}
/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg, tr.catbg td, .catbg3, tr.catbg3 td {
color: #666;
padding-left: 10px;
padding-right: 10px;
background: #ccc url(images/catbg.png) repeat-x;
}
.catbg2, tr.catbg2 td {
color: #666;
padding-left: 10px;
padding-right: 10px;
background: #ccc url(images/catbg.png)
}
.catbg, .catbg2, .catbg3 {
border-bottom: solid 1px #d1d1d1;
}
.catbg, .catbg2 {
font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited {
font-size: 95%;
color: #666;
text-decoration: none;
}
.catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited {
color: #666;
text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover {
color: #515151;
}
.catbg4, .catbg4 a:link, .catbg4 a:visited {
background: #eee url(images/catbg.html) repeat-x;
border-bottom: 3px solid #e8e8e8;
color: #666;
font-size: 12px;
font-weight: bold;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor {
background-color: #ededed;
padding: 0;
}
/* This is used on tables that should just have a border around them. */
.tborder {
padding: 0px;
border: 1px solid #e2e2e2;
}
/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext {
font-size: 11px;
font-family: Tahoma, sans-serif;
}
.middletext {
line-height: 18px;
text-indent: 10px;
}
.normaltext {
font-size: small;
}
.largetext {
font-size: large;
}
/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage {
width: 100%;
overflow: auto;
line-height: 1.3em;
}
/* All the signatures used in the forum. If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature {
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}
/* Sometimes there will be an error when you post */
.error {
color: red;
}
/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last, .mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last {
vertical-align: top;
}
.maintab_back, .maintab_active_back, .mirrortab_back, .mirrortab_active_back {
text-decoration: none;
color: #ccc;
font-weight: bold;
font-size: 11px;
font-family: Tahoma, sans-serif;
padding: 5px;
}
.maintab_first,.mirrortab_first {
display: none;
}
.maintab_back,.mirrortab_back {}
.maintab_last,.mirrortab_last {
display: none;
}
.maintab_active_first, .mirrortab_active_first {
display: none;
}
.maintab_active_back, .mirrortab_active_back {
text-decoration: overline;
}
.maintab_active_last, .mirrortab_active_last {
display: none;
}
/* how links behave in main tab. */
.maintab_back a:link, .maintab_back a:visited, .mirrortab_back a:link, .mirrortab_back a:visited {
color: #444;
text-decoration: none;
}
.maintab_active_back a:link, .maintab_active_back a:visited, .mirrortab_active_back a:link, .mirrortab_active_back a:visited {
color: #444;
text-decoration: none;
}
.maintab_back a:hover, .maintab_active_back a:hover, .mirrortab_back a:hover, .mirrortab_active_back a:hover {
color: #387cb3;
text-decoration: overline;
}
/* The AJAX notifier */
#ajax_in_progress {
background: #326EA0;
color: white;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 5px 0 10px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.wrapper {
width: 1000px;
margin: 0 auto;
padding: 0;
}
#topbar {
height: 117px;
background: #aaa url(images/custom/top-bg.png) 0 0 repeat-x;
}
#header {
position: relative;
overflow: hidden;
height: 117px;
}
#time-date {
font-size: 11px;
float: right;
padding: 25px 40px 2px 35px;
color: #999;
background: url(images/custom/clock.png) 0 100% no-repeat;
}
#logo, #logo a {
position: absolute;
left: 0;
top: 0;
display: block;
width: 757px;
height: 117px;
background: url(images/custom/logo.png) no-repeat;
}
#searchbar {
position: absolute;
bottom: 23px;
right: 30px;
height: 36px;
width: 210px;
background: url(images/custom/searchbox.png) no-repeat;
overflow: hidden;
}
#searchbar .inputbox {
background: transparent;
color: #666;
padding: 3px 3px 0;
border: none;
margin: 13px 0 0 25px;
width: 120px;
height: 14px;
font-size: 11px;
font-family: tahoma, sans-serif;
}
#toolbar {
background: url(images/custom/toolbar-bg.png) 0 0 repeat-x;
height: 61px;
}
#topnav {
float: left;
height: 61px;
padding-left: 5px;
margin: 0px;
z-index: 100;
}
#topnav ul {
margin: 0;
padding: 0;
}
#topnav li {
float: left;
margin: 0;
padding: 0px;
position: relative;
padding-right: 1px;
line-height: 16px;
list-style-type: none;
}
#topnav li a {
display: block;
float: left;
color: #666;
text-decoration: none;
padding: 16px 23px 13px;
font-size: 11px;
}
#topnav li strong {
color: #ccc;
font-size: 14px;
font-family: Arial Narrow, Arial, sans-serif;
}
#topnav li a:hover, #topnav .chosen a:hover, #topnav li:hover a, #topnav li.sfhover a {
color: #358ACD;
}
#topnav li.chosen {
background: url(images/custom/topnav-chosen.png) 50% 0 no-repeat;
color: #358ACD;
}
#topnav a.current {
background: url(images/custom/topnav-chosen.png) 50% 0 no-repeat;
color: #358ACD;
}
#topnav li.current {
background: url(images/custom/topnav-chosen.png) 50% 0 no-repeat;
color: #358ACD;
}
#topnav li.chosen a strong {
background: url(images/custom/topnav-chosen.png) 50% 0 no-repeat;
color: #358ACD;
}
#topnav .chosen a, #topnav .chosen a:hover, #topnav li li a:hover {
background: url(images/custom/topnav-chosen.png) 50% 0 no-repeat;
color: #787878;
}
#topnav li li {
width: 170px;
height: auto;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #313131;
}
#topnav li li a, #topnav .chosen li a, #topnav li:hover li a, #topnav li.sfhover li a {
background: #202020;
display: block;
height: 30px;
line-height: 30px;
padding: 0 0 0 22px;
width: 148px;
float: none;
color: #999;
font-weight: bold;
font-size: 11px;
text-decoration: none;
}
#topnav li li a:hover, #topnav .chosen li a:hover {
background: #1a1a1a;
color: #ccc;
text-decoration: none;
}
#topnav li ul {
background: #1d1d1d;
clear: both;
position: absolute;
height: auto;
width: 170px;
top: 61px;
left: -999em;
z-index: 100;
border-right: 1px solid #313131;
border-left: 1px solid #313131;
}
#topnav li:hover ul, #topnav li.sfhover ul {
left: auto;
}
#body-bg {
background: #242424 url(images/custom/body-bg.png);
padding: 0;
margin: 0;
}
#userbar-shad-l {
background: url(images/custom/userbar-shad-l.png) 0 0 no-repeat;
padding-left: 20px;
height: 130px;
}
#userbar-shad-r {
background: url(images/custom/userbar-shad-r.png) 100% 0 no-repeat;
padding-right: 20px;
height: 130px;
}
#userbar-main {
background: url(images/custom/userbar-main-bg.png) 0 0 repeat-x;
height: 130px;
}
#loginbox {
padding: 15px 0 5px 30px;
color: #888;
float: left;
font-size: 11px;
width: 400px;
}
#loginbox a:link, #loginbox a:visited {
color: #bcbcbc;
font-weight: bold;
}
#loginbox a:hover {
color: #ccc;
text-decoration: underline;
}
#loginbox form {
padding: 0;
margin: 0;
}
#loginbox ul {
padding: 0;
margin: 0;
list-style: none;
}
#loginbox1 {
padding: 2px 0 5px 10px;
color: #888;
float: left;
font-size: 11px;
width: 530px;
}
#ds-usernme {
background: url(images/custom/usernmebox.png) 0 0 no-repeat;
width: 144px;
height: 25px;
float: left;
margin-top: 4px;
margin-right: 10px;
}
#ds-passwrd {
background: url(images/custom/passwrdbox.png) 0 0 no-repeat;
width: 144px;
height: 25px;
float: left;
margin-top: 4px;
margin-right: 10px;
}
#ds-usernme input#usrnme, #ds-passwrd input#psswrd {
background: none;
color: #efefef;
padding: 3px 3px 0;
border: none;
margin: 4px 10px 0 30px;
width: 100px;
height: 14px;
font-size: 11px;
}
#loginbutton {
background: url(images/custom/loginbutton.png) no-repeat;
width: 52px;
height: 25px;
border: none;
padding: 0;
margin: 4px 0 0;
cursor: pointer;
}
.reminder {
padding: 10px 0 0 10px;
}
.ds-avatar {
float: left;
padding-right: 25px;
}
#news {
height: 70px;
padding: 15px 30px 5px 0;
overflow: hidden;
margin: 0;
width: 350px;
float: right;
color: #666;
}
#news strong {
color: #bcbcbc;
}
#body-shad-l {
background: url(images/custom/body-shad-l.png) 0 0 repeat-y;
padding-left: 20px;
}
#body-shad-r {
background: url(images/custom/body-shad-r.png) 100% 0 repeat-y;
padding-right: 20px;
}
#mainbody {
background: #fff;
padding: 0;
margin: 0;
}
#footer-l {
padding-left: 20px;
background: url(images/custom/footer-l.png) 0 0 no-repeat;
height: 120px;
}
#footer-r {
padding-right: 20px;
background: url(images/custom/footer-r.png) 100% 0 no-repeat;
height: 120px;
}
#footer {
background: #242424 url(images/custom/footer-bg.png) 0 0 repeat-x;
color: #aaa;
}
.foot-float-r {
float: right;
text-align: right;
padding: 25px 15px 0;
}
#footer img {
padding-top: 7px;
}
.foot-float-l {
float: left;
padding: 25px 15px 0;
}
#footer a:link, #footer a:visited {
color: #666;
font-family: Tahoma, sans-serif;
}
.clr {
clear: both;
}
.pathway-wrap {
margin: 0;
padding: 8px 10px 0 10px;
}
span.ds-pathway {
color: #555;
margin: 0 3px 0 0;
font-size: 10px;
}
span.pathway {
color: #387cb3;
font-size: 10px;
text-transform: uppercase;
}
span.pathway a:link, span.pathway a:visited {
color: #387cb3;
text-transform: none;
font-weight: bold;
font-size: 10px;
}
span.pathway a:hover {
text-decoration: underline;
}
.lastposts {
font-size: 10px;
color: #888;
padding-left: 6px;
}
.lastposts a {
font-weight: bold;
}
p.alert {
background: #fccece url(images/custom/alert.png) 15px 50% no-repeat;
padding: 10px 20px 10px 55px;
margin: 5px 5px 15px 5px;
border: 2px solid #dd8e8e;
color: #c73737;
text-align: left;
}
p.note {
background: #aad0e7 url(images/custom/note.png) 15px 50% no-repeat;
padding: 10px 20px 10px 50px;
margin: 5px 5px 15px 5px;
border: 2px solid #87a8bb;
color: #387cb3;
text-align: left;
}
p.note a:link, p.note a:visited {
color: #387cb3;
font-weight: bold;
}
p.alert a:link, p.alert a:visited {
color: #c73737;
font-weight: bold;
}
p.note a:hover, p.alert a:hover {
text-decoration: underline;
}
.team h2 {
background: #dfdfdf;
padding: 10px;
text-align: center;
}
.avatar2 {
width: 85px;
height: 85px;
}
ul.front_last {
list-style: none;
margin: 0;
padding: 0 ;
}
ul.front_last li
{
color: #777;
font-size: 11px;
padding: 2px 0 4px 30px;
line-height: 16px;
border-bottom: 1px solid #e8e8e8;
background: transparent url(images/custom/postbullet.png) 8px 7px no-repeat;
}
ul.front_last li a {
font-size: 11px;
}
nemam predstavu o tome kako da izmenim ovaj deo za pozadinu... da li neko može da mi pomogne?
hvala
http://www.w3schools.com/css/css_background.asp
Tu imaš sve.
Mada, lakše ti je da postaviš pozadinsku sliku nego da praviš kombinacije sa cssom..
Pozadinsku sliku možeš staviti ovako:
http://www.simplemachines.org/community/index.php?topic=345215.msg2333517#msg2333517