Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Skalowanie się tła

Założony przez  Limannielkou.

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
@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;
}
Może chodzi Ci o:
background-size: 100% 100%;
(Dodajesz w body).
background:  url('images/Engamepro/bbg.jpg') no-repeat center 0;
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI
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
Usuń jedno 100% i po kłopocie :D



Użytkownicy przeglądający ten wątek:

1 gości