Webboard

Webboard > Wsparcie MyBB > Style, szablony i grafika > Skalowanie się tła
Pełna wersja: Skalowanie się tła
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

Limannielkou

24.02.2014, 21:48
wersja skryptu MyBB:1.6.12
adres forum:http://testskinak.ugu.pl/
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): otóż potrzebuję zrobić tło z tej strony żeby się skalowało do rozmiaru monitora użytkownika. Wiem że to coś ze znakiem % lecz nie wiem gdzie dokładnie oraz jak to powinno wyglądać znajdować się

Rozumiem że będzie potrzebne global.css
Kod:
@import url(http://fonts.googleapis.com/css?family=PT+Sans);

body {
    background:  url(images/Engamepro/bbg.jpg);  
    background-attachment: fixed;
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
        margin: 0 auto;
}

a:link {
    color: #4B6885;
        transition: color .3s;
        -moz-transition: color .3s;
        -o-transition: color .3s;
        -webkit-transition: color .3s;
    text-decoration: none;
}

a:visited {
    color: #4B6885;
    text-decoration: none;
}

a:hover, a:active {
    color: #3f576f;
    text-decoration: 1px dashed #cacaca;
}


.header {
width: 100%;
height: 130px;
}

.wrap {
width: 960px;
margin: 0 auto;
}

.logo {
width: 400px;
border: 0px solid #2F2F2F;
margin: auto auto;
text-align: left;
float: left;
height: 90px;
margin-top: 30px;
opacity: 0.7;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}

.logo:hover {
       opacity: 1.0;
}

#container {
    width: 960px;
    background: #0B1218;
    border: 1px solid rgba(0,0,0,0.2);
    color: #cacaca;
    margin: auto auto;
    padding: 20px;
    text-align: left; /* IE 5 fix */
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: 0px 0px 10px rgba(54, 54, 54, 0.9);
margin-top: 10px;
z-index: 2;
}

#content {
    /* FIX: Make internet explorer wrap correctly */
    width: auto !important;

}

input#sboxin:focus {
       outline: none
}

.menu ul {
    color: #fff;
        font-family: "PT Sans" Arial;
        font-size: 15px;
    line-height: 36px;
    font-weight: bold;
    text-align: left;      
    padding: 2px;
         margin-left: -20px !important;
}

.menu ul a:link {
    color: #fff;
        transition: color .3s;
        -moz-transition: color .3s;
        -o-transition: color .3s;
        -webkit-transition: color .3s;
    text-decoration: none;
}

.menu ul a:visited {
    color: #fff;
    text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
    color: #cacaca;
    border-bottom: 1px dashed rgba(0,0,0,0.6);
}

#panel {
    background: url(images/Engamepro/plbg.png) top left repeat-x;
    color: #cacaca;    
    width: 960px;
    height : auto;
    margin: auto auto;
    align: center;
    padding: 8px;
    opacity:0.90;
}

#panel .remember_me input {
    vertical-align: middle;
    margin-top: -1px;
}

table {
    color: #000000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

.tborder {
    background: rgba(0,0,0.2);
    width: 100%;
    margin: auto auto;
    border: 2px solid rgba(0.0.0.4);
}

.thead {
    background: #4C6987 url(images/Engamepro/dd.png)repeat-x;
    color: #ffffff;
padding: 10px;
}

.thead a:link {
    color: #ffffff;
        transition: color .3s;
        -moz-transition: color .3s;
        -o-transition: color .3s;
        -webkit-transition: color .3s;
    text-decoration: none;
}

.thead a:visited {
    color: #ffffff;
    text-decoration: none;
}

.thead a:hover, .thead a:active {
    color: #ffffff;
    text-decoration: 1px dashed #2f2f2f;
}

.tcat {
    background: url(images/Engamepro/bbg.jpg)top left repeat-x;
    color: #fff;
    font-size: 12px;
}

.tcat a:link {
    color: #4B6885;
        transition: color .3s;
        -moz-transition: color .3s;
        -o-transition: color .3s;
        -webkit-transition: color .3s;
}

.tcat a:visited {
    color: #4B6885;
}

.tcat a:hover, .tcat a:active {
    color: #3f576f;
}

.trow1 {
    background: #f5f5f5;
padding: 10px;
}

.trow2 {
    background: #EFEFEF;
padding: 10px;
}

.trow_shaded {
    background: #ffdde0;
}

.trow_selected td {
    background: #FFFBD9;
}

.trow_sep {
    background: #e5e5e5;
    color: #000;
    font-size: 12px;
    font-weight: bold;
}

.tfoot {
    background: #4C6987 url(images/Engamepro/dd.png)repeat-x;
    color: #ffffff;
}

.tfoot a:link {
    color: #ffffff;
    text-decoration: none;
}

.tfoot a:visited {
    color: #ffffff;
    text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
    color: #ffffff;
    text-decoration: underline;
}

.bottommenu {
    background: #efefef;
    color: #000000;
    border: 1px solid #4874a3;
    padding: 10px;
}

.navigation {
    color: #000000;
    font-size: 13px;
    font-weight: bold;
}

.navigation a:link {
    text-decoration: none;
}

.navigation a:visited {
    text-decoration: none;
}

.navigation a:hover, .navigation a:active {
    text-decoration: none;
}

.navigation .active {
    color: #000000;
    font-size: 13px;
    font-weight: bold;
}

.smalltext {
    font-size: 11px;
}

.largetext {
    font-size: 16px;
    font-weight: bold;
}

input.textbox, select, input[type="text"], input[type="password"] {
    background: none repeat scroll 0 0 #E0E0E0;
    border: 1px solid #C0C0C0;
    border-radius: 2px 2px 2px 2px !important;
    color: #000000;
    margin: 0;
    padding: 5px;
}

textarea {
    background: #ffffff;
    color: #000000;
    border: 1px solid #cacaca;
    padding: 2px;
    font-family: Verdana, Arial, Sans-Serif;
    line-height: 1.4;
    font-size: 13px;
}

select {
    background: #ffffff;
    border: 1px solid #cacaca;
}

.editor {
    background: #f1f1f1;
    border: 1px solid #ccc;
}

.editor_control_bar {
    background: #fff;
    border: 1px solid #cacaca;
}

.autocomplete {
    background: #fff;
    border: 1px solid #000;
    color: black;
}

.autocomplete_selected {
    background: #adcee7;
    color: #000;
}

.popup_menu {
    background: #ccc;
    border: 1px solid #000;
}

.popup_menu .popup_item {
    background: #fff;
    color: #000;
}

.popup_menu .popup_item:hover {
    background: #C7DBEE;
    color: #000;
}

.trow_reputation_positive {
    background: #ccffcc;
}

.trow_reputation_negative {
    background: #ffcccc;
}

.reputation_positive {
    color: green;
}

.reputation_neutral {
    color: #444;
}

.reputation_negative {
    color: red;
}

.invalid_field {
    border: 1px solid #f30;
    color: #f30;
}

.valid_field {
    border: 1px solid #0c0;
}

.validation_error {
    background: url(images/invalid.gif) no-repeat center left;
    color: #f30;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_success {
    background: url(images/valid.gif) no-repeat center left;
    color: #00b200;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_loading {
    background: url(images/spinner.gif) no-repeat center left;
    color: #555;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

/* Additional CSS (Master) */
img {
    border: none;
}

.clear {
    clear: both;
}

.hidden {
    display: none;
    float: none;
    width: 1%;
}

.hiddenrow {
    display: none;
}

.selectall {
    background-color: #FFFBD9;
    font-weight: bold;
    text-align: center;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.menu ul {
    list-style: none;
    margin: 0;
}

.menu li {
    display: inline;
    padding-left:12px;
}

.menu img {
    padding-right: 5px;
    vertical-align: top;
}

#panel .links {
    margin: 0;
    float: right;
}

.expcolimage {
    float: right;
    width: auto;
    vertical-align: middle;
    margin-top: 3px;
}

img.attachment {
    border: 1px solid #E9E5D7;
    padding: 2px;
}

hr {
    background-color: #000000;
    color: #000000;
    height: 1px;
    border: 0px;
}

#copyright {
    font: 11px Verdana, Arial, Sans-Serif;
    margin: 0;
    padding: 10px 0 0 0;
}

#debug {
    float: right;
    text-align: right;
    margin-top: 0;
}

blockquote {
    border: 1px solid #ccc;
    margin: 0;
    background: #fff;
    padding: 4px;
}

blockquote cite {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    font-style: normal;
    display: block;
    margin: 4px 0;
}

blockquote cite span {
    float: right;
    font-weight: normal;
}

blockquote cite span.highlight {
    float: none;
    font-weight: bold;
    padding-bottom: 0;
}

.codeblock {
    background: #fff;
    border: 1px solid #ccc;
    padding: 4px;
}

.codeblock .title {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    margin: 4px 0;
}

.codeblock code {
    overflow: auto;
    height: auto;
    max-height: 200px;
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
}

.subforumicon {
    border: 0;
    vertical-align: middle;
}

.separator {
    margin: 5px;
    padding: 0;
    height: 0px;
    font-size: 1px;
    list-style-type: none;
}

form {
    margin: 0;
    padding: 0;
}

.popup_menu .popup_item_container {
    margin: 1px;
    text-align: left;
}

.popup_menu .popup_item {
    display: block;
    padding: 3px;
    text-decoration: none;
    white-space: nowrap;
}

.popup_menu a.popup_item:hover {
    text-decoration: none;
}

.autocomplete {
    text-align: left;
}

.subject_new {
    font-weight: bold;
}

.highlight {
    background: #FFFFCC;
    padding-top: 3px;
    padding-bottom: 3px;
}

.pm_alert {
    background: #FFF6BF;
    border: 1px solid #FFD324;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
}

.red_alert {
    background: #FBE3E4;
    border: 1px solid #A5161A;
    color: #A5161A;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
}

.high_warning {
    color: #CC0000;
}

.moderate_warning {
    color: #F3611B;
}

.low_warning {
    color: #AE5700;
}

div.error {
    padding: 5px 10px;
    border-top: 2px solid #FFD324;
    border-bottom: 2px solid #FFD324;
    background: #FFF6BF;
    font-size: 12px;
}

div.error p {
    margin: 0;
    color: #000;
    font-weight: normal;
}

div.error p em {
    font-style: normal;
    font-weight: bold;
    padding-left: 24px;
    display: block;
    color: #C00;
    background: url(images/error.gif) no-repeat 0;
}

div.error.ul {
    margin-left: 24px;
}

.online {
    color: #15A018;
}

.offline {
    color: #C7C7C7;
}

.pagination {
    font-size: 11px;
    padding-top: 10px;
    margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
    padding-top: 0;
}
.pagination .pages {
    font-weight: bold;
}

.pagination .pagination_current, .pagination a {
    padding: 2px 6px;
    margin-bottom: 3px;
}

.pagination a {
    border: 1px solid #4B6885;
}

.pagination .pagination_current {
    background: #4B6885;
    border: 1px solid #4B6885;
    font-weight: bold;
    color: #fff;
}

.pagination a:hover {
    background: #A8413D;
        border: 1px solid #A8413D;
        color: #fff;
    text-decoration: none;
}

.thread_legend, .thread_legend dd {
    margin: 0;
    padding: 0;
}

.thread_legend dd {
    padding-bottom: 4px;
    margin-right: 15px;
}

.thread_legend img {
    margin-right: 4px;
    vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
    margin: 0;
    padding: 0;
}

.forum_legend dd {
    float: left;
    margin-right: 10px;
}

.forum_legend dt {
    margin-right: 10px;
    float: left;
}

.success_message {
    color: #00b200;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.error_message {
    color: #C00;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.post_body {
    padding: 5px;
}

.post_content {
    padding: 5px 10px;
}

.quick_jump {
    background: url(images/jump.gif) no-repeat 0;
    width: 13px;
    height: 13px;
    padding-left: 13px; /* amount of padding needed for image to fully show */
    vertical-align: middle;
    border: none;
}

.repbox {
    font-size:16px;
    font-weight: bold;
    padding:5px 7px 5px 7px;
}

._neutral {
    background-color:#FAFAFA;
    color: #999999;
    border:1px solid #CCCCCC;
}

._minus {
    background-color: #FDD2D1;
    color: #CB0200;
    border:1px solid #980201;
}

._plus {
    background-color:#E8FCDC;
    color: #008800;
    border:1px solid #008800;
}

.pagination_breadcrumb {
    background-color: #f5f5f5;
    border: 1px solid #fff;
    outline: 1px solid #ccc;
    padding: 5px;
    margin-top: 5px;
    font-weight: normal;
}

.pagination_breadcrumb_link {
    vertical-align: middle;
    cursor: pointer;
}

.panell {
     background: url(images/Engamepro/bg.jpg) top left repeat-x;
    color: #cacaca;
    position: fixed;
    width: 960px;
    height : 30 px;
    margin: auto auto;
    align: center;
    padding: 8px;

}

.bubble {
    clear: both;
    margin: 0px auto;
    width: auto;
    position: relative;
    z-index: 90;
}

.rectangle {
    background: #c95e53; /* Old browsers */
background: -moz-linear-gradient(top, #c95e53 0%, #a43636 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c95e53), color-stop(100%,#a43636)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c95e53 0%,#a43636 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c95e53 0%,#a43636 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #c95e53 0%,#a43636 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c95e53', endColorstr='#a43636',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #c95e53 0%,#a43636 100%); /* W3C */
    height: 40px;
    width: 1033px;
    position: relative;
    left:-36px;
    top: 20px;
    float: left;
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
    font-size: 30px;
    color: #fff;
    padding-top: 6px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    text-align: center;
}
.triangle-l {
    border-color: transparent #7F302F transparent transparent;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: -51px;
    top: 4px;
    z-index: -1; /* displayed under bubble */
}

.triangle-r {
    border-color: transparent transparent transparent #7F302F;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: 981px;
    top: 16px;
    z-index: -1; /* displayed under bubble */
}


.userdropdown {
    border: 1px solid #373737;
    background: #242424;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    min-width: 110px;
}

.menu_head {
    border-left: 1px solid #373737;
    float: right;
    cursor: pointer;
}

.panel .menu_body {
    display: none;
    border: 1px solid #373737;
    border-top: 0;
    z-index: 101;
    background: #242424;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
}

.menu_body li {
    padding: 4px;
    border-bottom: 1px solid #373737;
    min-width: 102px;
}

.buttons, .buttons:visited {
    background: #222 url(overlay.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
        font-family: "PT Sans" Arial;
        font-size: 15px;
    line-height: 12px;
    text-decoration: none;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer
}

.buttons:hover     {
      background-color: #111;
      color: #fff;
}

.buttons:active     {
     top: 1px;
}

.small.buttons, .small.buttons:visited {
   font-size: 11px
}

.buttons, .buttons:visited, .medium.buttons, .medium.buttons:visited {
   font-size: 13px;
   font-weight: bold;
   line-height: 1.1;
   text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
                                                  
.large.buttons, .large.buttons:visited {
   font-size: 14px;
   padding: 8px 14px 9px;
}
                                                      
.super.buttons, .super.buttons:visited {
   font-size: 34px;
padding: 8px 14px 9px;
}
    
.red.buttons, .red.buttons:visited {
         background-color: #A8413D;
         color: #fff;  
         transition: color .3s;
        -moz-transition: color .3s;
        -o-transition: color .3s;
        -webkit-transition: color .3s; }

.red.buttons:hover {
       background-color: #c25a56;  
}
    
.blue.buttons, .blue.buttons:visited {
         background: #4B6885;
        color: #fff;
         transition: color .3s;
        -moz-transition: color .3s;
        -o-transition: color .3s;
        -webkit-transition: color .3s;
}

.blue.buttons:hover    {
       background-color: #698aab;
}

.buttons.image {
     margin: auto auto;
}

.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(images//Engamepro/tipsy.gif); }
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: #BC4945; color: white; max-width: 200px; text-align: center; }
  .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-north { background-position: top center; }
  .tipsy-south { background-position: bottom center; }
  .tipsy-east { background-position: right center; }
  .tipsy-west { background-position: left center; }

  .post_body {
        -moz-border-radius:6px 6px 6px 6px;
         border-radius:6px 6px 6px 6px;
         background:none repeat scroll 0 0 #f5d0cf;
         margin:8px;
         padding:10px;
         color:;
         text-shadow: none;
}

.post_arrow {
         border-bottom:12px solid #f5d0cf;
         border-left:12px solid transparent;
         border-right:12px solid transparent;
         height:0;
         margin-bottom:-12px;
         margin-left:15px;
         margin-top:3px;
         width:0;
}


.footer {
        background: #0B1218;
        width: 958px;  
        color: #ffffff;
        align: center;
        overflow: hidden;
       margin: auto auto;
       margin-top: -15px;
       padding: 20px;
       height: 130px;
       border-left: 2px solid rgba(0,0,0,0.2);
       border-right: 2px solid rgba(0,0,0,0.2);
       border-bottom: 2px solid rgba(0,0,0,0.2);
       text-align: center;
       font-size: 11px;
      -webkit-border-bottom-right-radius: 4px;
      -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-bottomright: 4px;
       -moz-border-radius-bottomleft: 4px;
       border-bottom-right-radius: 4px;
       border-bottom-left-radius: 4px;
}
        
.logintext {
    height: 70px;
    width: 100;
}
.loginform {
    height: 70px;
    width:70;
}

#searchbox {
    background: url(images/Engamepro/plbg.png);
    width: 210px;
    color : #fff;
    margin: -32px 14px 0 0;
    position: relative;
    height: 15px;
    border: 0px solid #fff;
    padding: 5px;
  opacity: 0.8;
        transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
       -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
}

#searchbox:hover {
       opacity: 1.0;
}

#sboxin {
        background: none;
        color : #fff;
        width: 190px;
        height: 23px;
        position: absolute;
        top: -4px;
        left: 0px;
        border: none;
padding-left: 10px;    
}

#sboxgo {
    background: url(images/Engamepro/search.png) ;
    repeat: none;
    width: 16px;
    position: absolute;
    top: 5px;
    right: 6px;
    height: 16px;
    border: none;
    padding: 0;
}    

input.button {
    background: #4B6885;
    padding: 4px 10px;
    border: 1px solid #517090;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        border-radius: 2px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0px -1px 0px #517090;
     transition: color .3s;
        -moz-transition: color .3s;
        -o-transition: color .3s;
        -webkit-transition: color .3s;
}

input.button:hover {
    background: #698aab;
    padding: 4px 10px;
    border: 1px solid #7492b1;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        border-radius: 2px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0px -1px 0px #7492b1;
    cursor: pointer;        
}

.tcat.small {
background: url(images/Engamepro/bg_small.png)top left repeat-x;
color: #fff;
font-size: 12px;  
}         

.warn_info
{
font-size:20px;
color:red;
background: url(images/Engamepro/warn.png)top left repeat-x;
}

GiboneKPL

24.02.2014, 22:04
Może chodzi Ci o:
Kod:
background-size: 100% 100%;
(Dodajesz w body).

SLAVOO

24.02.2014, 22:12
Kod:
background:  url('images/Engamepro/bbg.jpg') no-repeat center 0;

Limannielkou

24.02.2014, 22:12
no niby wszystko fajnie ze skalowało się koledze ale nie dałoby się jakoś zrobić żeby te postacie zostawały na swoich pozycjach?
SCREEN

GiboneKPL

24.02.2014, 22:41
Usuń jedno 100% i po kłopocie :D
Webboard > Wsparcie MyBB > Style, szablony i grafika > Skalowanie się tła