Como arrumar o meu banner?

Detalhes da questão

Endereço do fórum: https://policiacim-grafx.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá, boa tarde, meu banner tá saindo assim:


Eu coloquei ele pelo CSS e não ficando certinho, a imagem que quero é essa:

Código:

.copyright {
    border-top: 5px solid #394248;
    background: #394248;
    padding-top: 1em;
}
 
.footerbar-system { padding-bottom: 1.7rem; }
 
.copyright-info div {
  height: max-content;
  width: 50%;
}
 
.copyright-info div:not(:first-child) { margin-left: 1em; }
 
.copyright-info div > h3 {
    color: wheat;
    font-weight: bolder;
    border: 0;
    margin-bottom: 0!important;
}
 
.copyright div > p { overflow-wrap: break-word; }
 
.copyright-info {
    display: flex!important;
    align-items: stretch;
    max-width: 100%;
    justify-content: flex-end;
}
 
.admin_link {
    position: fixed;
    z-index: 999;
    bottom: 5%;
    right: 5%;
}
 
.admin_link br { display: none; }
.admin_link a {
    background: #239df7;
    border: 4px solid #3793ff;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
    height: max-content;
    width: max-content;
    text-align: center;
    transition: all .5s;
}
.admin_link a:hover {
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1), inset 0 0 1px 1px rgba(0,0,0,.1);
}
/*  HEADER
**===================*/
.headerbar {
    background-color: #1D262C;
    background-image: url(https://i.servimg.com/u/f73/20/21/08/06/screen11.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 360px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
/*--- MENU ---*/
.menu {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: rgb(20,20,20);
    box-shadow: inset rgba(0, 0, 0, 0.20) 0px -2px 0px;
    height: 70px;
    z-index: 999;
}
 
.menu .menu-container {
    width: 95%;
    margin: 0 auto;
}
 
/*-- Links do menu --*/
.menu .menu-container .menu-link-wrapper {
    width: 40%;
    float: left;
}
 
.menu-link-wrapper .menu-link {
    background-color: rgba(190, 190, 190, 0.05);
    position: relative;
    display: inline-block;
    margin-right: 6px;
    width: 70px;
    height: 70px;
    cursor: pointer;
}
 
.menu-link-wrapper .menu-link .icon {
    width: 100%;
    filter: grayscale(100%);
    height: 70px;
    background-position: center;
    background-repeat: no-repeat;
}
 
.menu-link-wrapper .menu-link:hover .icon { filter: grayscale(0%); }
 
.menu-link-wrapper .menu-link .icon.forum { background-image: url(https://i.servimg.com/u/f13/19/76/41/44/15889710.png); }
.menu-link-wrapper .menu-link .icon.portal { background-image: url(https://images.habbo.com/c_images/album1584/FR92A.gif); }
.menu-link-wrapper .menu-link .icon.membros { background-image: url(https://images.habbo.com/c_images/album1584/FR91A.gif); }
.menu-link-wrapper .menu-link .icon.grupos { background-image: url(https://images.habbo.com/c_images/album1584/PT473.gif); }
 
.menu-link-wrapper .menu-link .text {
    border: 1px solid #2b2b2b;
    border-radius: 4px;
    background-color: #212121;
    box-shadow: 0 0 2px 1px rgba(255,255,255,.3) inset, 0 3px 9px rgba(0,0,0,.18);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 25px;
    color: #fff;
    position: absolute;
    bottom: -30px;
    left: -20px;
    z-index: 2;
    width: 108px;
    height: 28px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
    opacity: 0;
    -webkit-transition: .3s opacity;
    -moz-transition: .3s opacity;
    transition: .3s opacity;
}
 
.menu-link-wrapper .menu-link:hover .text {
    opacity: 1;
    -webkit-transition: .3s opacity;
    -moz-transition: .3s opacity;
    transition: .3s opacity;
}
 
.menu-link-wrapper .menu-link .text:after {
    position: absolute;
    top: -8px;
    left: calc(50% - 7px);
    content: '';
    -webkit-filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
    filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
    height: 0;
    width: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #464646;
}
 
/*-- Logo --*/
.menu .menu-container .menu-logo {
    background: url(https://i.imgur.com/1rMYtZV.gif) no-repeat center center;
    float: left;
    width: 28%;
    height: 70px;
}
 
/*--- HEADER BOX ---*/
.header-box {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(93, 89, 89, 0.8));
    width: 260px;
    height: 190px;
    border-radius: 10px;
    box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);
    font-size: 13px;
    padding: 5px;
    color: #fff;
    text-shadow: 0 2px rgba(0,0,0,0.5);
    position: absolute;
    bottom: 5%;
    right: 5%;
}
 
.header-box .box-title {
    font-size: 20px;
    text-align: center;
}
 
.header-box .box-content {
    margin: 5px;
}
 
.box-content a {
    display: block;
    color: #fff;
}
.box-content a:hover { text-shadow: 0 0 5px; }
 
.header-box .box-avatar {
    float: right;
    margin-top: -48%;
}
 
.box-logout {
    width: 100%;
}
 
.login-inputbox {
    background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(235,235,235));
    width: 240px;
    height: 40px;
    border: none;
    border-radius: 8px;
    margin: 5px;
    padding: 0 15px!important;
    font-size: 1em!important;
    cursor: auto!important;
    box-shadow: inset 0 -3px rgba(0,0,0,0.1), 0 0 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.1);
}
.login-inputbox:hover, .login-inputbox:focus { border-bottom: none!important; }
 
.login-btn {
    height: 40px;
    border-radius: 8px!important;
    margin: 2px;
    box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -3px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), 0 0 4px rgba(0,0,0,0.15)!important;
    color: #FFF;
    text-shadow: 0 2px rgba(0,0,0,0.2);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 1px 10px!important;
    cursor: pointer!important;
}
 
.login-btn.login {
    background-image: linear-gradient(to bottom, rgb(80,113,156), rgb(55,80,115));
    border: 1px solid rgb(46,65,93);
    width: 140px!important;
}
.login-btn.login:active { background-image: linear-gradient(to top, rgb(80,113,156), rgb(55,80,115)); }
 
.login-btn.register {
    background-image: linear-gradient(to bottom, rgb(113,208,43), rgb(77,141,29));
    border: 1px solid rgb(48,88,18);
    width: 100px;
}
.login-btn.register:active { background-image: linear-gradient(to top, rgb(113,208,43), rgb(77,141,29)); }
 
.login-btn.logout {
    background-image: linear-gradient(to bottom, rgb(207,72,46), rgb(144,50,32));
    border: 1px solid rgb(102,36,23);
    width: 140px;
    margin-top: 0;
}
.login-btn.logout:active { background-image: linear-gradient(to top, rgb(207,72,46), rgb(144,50,32)); }
 
.login-btn.mp, .login-btn.notif {
    width: 48px;
    outline: none;
    font-size: 15px;
}
 
.login-btn.mp {
    background-image: linear-gradient(to bottom, rgb(255,165,0), rgb(179,116,0));
    border: 1px solid rgb(103,66,0);
}
.login-btn.mp:active { background-image: linear-gradient(to top, rgb(255,165,0), rgb(179,116,0)); }
.login-btn.mp:before {
    content: '\f0e0';
    font-family: 'Font Awesome 5 Free';
}
 
a[data-status*="Nova"] .login-btn.mp:after {
    content: '';
    width: 7px;
    height: 7px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    margin-left: -1%;
    margin-top: -.3%;
}
 
 
.login-btn.notif {
    background-image: linear-gradient(to bottom, rgb(113,208,43), rgb(77,141,29));
    border: 1px solid rgb(48,88,18);
}
.login-btn.notif:active { background-image: linear-gradient(to top, rgb(113,208,43), rgb(77,141,29)); }
.login-btn.notif:before {
    content: '\f0f3';
    font-family: 'Font Awesome 5 Free';
}
/*** ESTATÍSTICAS
======================================= ***/

.block { background-color: #fff; }

.block a:link,
.block a:visited {
    color: #444;
}

.block .h3 {
    font-size: 20px;
    border: none;
}

.block .h3 i {
    height: 28px;
    line-height: 30px;
    margin-right: 10px;
    color: #39c;
}

.stats-tabs br { display: none; }

.stats-tabs section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}

.stats-tabs input { display: none; }

.stats-tabs label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}

.stats-tabs label:before {
  font-family: "Font Awesome 5 Free";
  margin-right: 10px;
}

.stats-tabs label[for*='1']:before { content: '\f0c0'; }
.stats-tabs label[for*='2']:before { content: '\f1fd'; }
.stats-tabs label[for*='3']:before { content: '\f187'; }

.stats-tabs label:hover {
  color: #789;
  cursor: pointer;
}

.stats-tabs input:checked + label {
  color: #357FBF;
  border: 1px solid #abc;
  border-top: 2px solid #357FBF;
  border-bottom: 1px solid #fff;
}

.stats-tabs #tab1:checked ~ #content1,
.stats-tabs #tab2:checked ~ #content2,
.stats-tabs #tab3:checked ~ #content3 { display: block; }

@media screen and (max-width: 800px) {
  .stats-tabs label {
    font-size: 0;
  }
  .stats-tabs label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 500px) {
  .stats-tabs label {
    padding: 15px;
  }
}

.block .legend { font-size: 0px; }

.block .legend b a {
    font-size: 13px;
    font-weight: 600;
}

.block .legend b a::after {
    content: ", ";
    font-weight: 400;
    color: #000;
}

.block .legend b:last-child a::after { content: ""; }

Meu CSS.

Olá Icaro325,

Isso ocorre porque a imagem não está com a resolução adequada. A resolução adequada para este menu é 1350x350. Você pode redimensionar e tentar novamente.

Chanp

Olá @Icaro325,

Altere o seu CSS para:

Código:

.copyright {
    border-top: 5px solid #394248;
    background: #394248;
    padding-top: 1em;
}
 
.footerbar-system { padding-bottom: 1.7rem; }
 
.copyright-info div {
  height: max-content;
  width: 50%;
}
 
.copyright-info div:not(:first-child) { margin-left: 1em; }
 
.copyright-info div > h3 {
    color: wheat;
    font-weight: bolder;
    border: 0;
    margin-bottom: 0!important;
}
 
.copyright div > p { overflow-wrap: break-word; }
 
.copyright-info {
    display: flex!important;
    align-items: stretch;
    max-width: 100%;
    justify-content: flex-end;
}
 
.admin_link {
    position: fixed;
    z-index: 999;
    bottom: 5%;
    right: 5%;
}
 
.admin_link br { display: none; }
.admin_link a {
    background: #239df7;
    border: 4px solid #3793ff;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
    height: max-content;
    width: max-content;
    text-align: center;
    transition: all .5s;
}
.admin_link a:hover {
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1), inset 0 0 1px 1px rgba(0,0,0,.1);
}
/*  HEADER
**===================*/
.headerbar {
    background-color: black;
    background-image: url(https://i.servimg.com/u/f73/20/21/08/06/screen11.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto;
    height: 360px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
/*--- MENU ---*/
.menu {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: rgb(20,20,20);
    box-shadow: inset rgba(0, 0, 0, 0.20) 0px -2px 0px;
    height: 70px;
    z-index: 999;
}
 
.menu .menu-container {
    width: 95%;
    margin: 0 auto;
}
 
/*-- Links do menu --*/
.menu .menu-container .menu-link-wrapper {
    width: 40%;
    float: left;
}
 
.menu-link-wrapper .menu-link {
    background-color: rgba(190, 190, 190, 0.05);
    position: relative;
    display: inline-block;
    margin-right: 6px;
    width: 70px;
    height: 70px;
    cursor: pointer;
}
 
.menu-link-wrapper .menu-link .icon {
    width: 100%;
    filter: grayscale(100%);
    height: 70px;
    background-position: center;
    background-repeat: no-repeat;
}
 
.menu-link-wrapper .menu-link:hover .icon { filter: grayscale(0%); }
 
.menu-link-wrapper .menu-link .icon.forum { background-image: url(https://i.servimg.com/u/f13/19/76/41/44/15889710.png); }
.menu-link-wrapper .menu-link .icon.portal { background-image: url(https://images.habbo.com/c_images/album1584/FR92A.gif); }
.menu-link-wrapper .menu-link .icon.membros { background-image: url(https://images.habbo.com/c_images/album1584/FR91A.gif); }
.menu-link-wrapper .menu-link .icon.grupos { background-image: url(https://images.habbo.com/c_images/album1584/PT473.gif); }
 
.menu-link-wrapper .menu-link .text {
    border: 1px solid #2b2b2b;
    border-radius: 4px;
    background-color: #212121;
    box-shadow: 0 0 2px 1px rgba(255,255,255,.3) inset, 0 3px 9px rgba(0,0,0,.18);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 25px;
    color: #fff;
    position: absolute;
    bottom: -30px;
    left: -20px;
    z-index: 2;
    width: 108px;
    height: 28px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
    opacity: 0;
    -webkit-transition: .3s opacity;
    -moz-transition: .3s opacity;
    transition: .3s opacity;
}
 
.menu-link-wrapper .menu-link:hover .text {
    opacity: 1;
    -webkit-transition: .3s opacity;
    -moz-transition: .3s opacity;
    transition: .3s opacity;
}
 
.menu-link-wrapper .menu-link .text:after {
    position: absolute;
    top: -8px;
    left: calc(50% - 7px);
    content: '';
    -webkit-filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
    filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
    height: 0;
    width: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #464646;
}
 
/*-- Logo --*/
.menu .menu-container .menu-logo {
    background: url(https://i.imgur.com/1rMYtZV.gif) no-repeat center center;
    float: left;
    width: 28%;
    height: 70px;
}
 
/*--- HEADER BOX ---*/
.header-box {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(93, 89, 89, 0.8));
    width: 260px;
    height: 190px;
    border-radius: 10px;
    box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);
    font-size: 13px;
    padding: 5px;
    color: #fff;
    text-shadow: 0 2px rgba(0,0,0,0.5);
    position: absolute;
    bottom: 5%;
    right: 5%;
}
 
.header-box .box-title {
    font-size: 20px;
    text-align: center;
}
 
.header-box .box-content {
    margin: 5px;
}
 
.box-content a {
    display: block;
    color: #fff;
}
.box-content a:hover { text-shadow: 0 0 5px; }
 
.header-box .box-avatar {
    float: right;
    margin-top: -48%;
}
 
.box-logout {
    width: 100%;
}
 
.login-inputbox {
    background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(235,235,235));
    width: 240px;
    height: 40px;
    border: none;
    border-radius: 8px;
    margin: 5px;
    padding: 0 15px!important;
    font-size: 1em!important;
    cursor: auto!important;
    box-shadow: inset 0 -3px rgba(0,0,0,0.1), 0 0 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.1);
}
.login-inputbox:hover, .login-inputbox:focus { border-bottom: none!important; }
 
.login-btn {
    height: 40px;
    border-radius: 8px!important;
    margin: 2px;
    box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -3px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), 0 0 4px rgba(0,0,0,0.15)!important;
    color: #FFF;
    text-shadow: 0 2px rgba(0,0,0,0.2);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 1px 10px!important;
    cursor: pointer!important;
}
 
.login-btn.login {
    background-image: linear-gradient(to bottom, rgb(80,113,156), rgb(55,80,115));
    border: 1px solid rgb(46,65,93);
    width: 140px!important;
}
.login-btn.login:active { background-image: linear-gradient(to top, rgb(80,113,156), rgb(55,80,115)); }
 
.login-btn.register {
    background-image: linear-gradient(to bottom, rgb(113,208,43), rgb(77,141,29));
    border: 1px solid rgb(48,88,18);
    width: 100px;
}
.login-btn.register:active { background-image: linear-gradient(to top, rgb(113,208,43), rgb(77,141,29)); }
 
.login-btn.logout {
    background-image: linear-gradient(to bottom, rgb(207,72,46), rgb(144,50,32));
    border: 1px solid rgb(102,36,23);
    width: 140px;
    margin-top: 0;
}
.login-btn.logout:active { background-image: linear-gradient(to top, rgb(207,72,46), rgb(144,50,32)); }
 
.login-btn.mp, .login-btn.notif {
    width: 48px;
    outline: none;
    font-size: 15px;
}
 
.login-btn.mp {
    background-image: linear-gradient(to bottom, rgb(255,165,0), rgb(179,116,0));
    border: 1px solid rgb(103,66,0);
}
.login-btn.mp:active { background-image: linear-gradient(to top, rgb(255,165,0), rgb(179,116,0)); }
.login-btn.mp:before {
    content: '\f0e0';
    font-family: 'Font Awesome 5 Free';
}
 
a[data-status*="Nova"] .login-btn.mp:after {
    content: '';
    width: 7px;
    height: 7px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    margin-left: -1%;
    margin-top: -.3%;
}
 
 
.login-btn.notif {
    background-image: linear-gradient(to bottom, rgb(113,208,43), rgb(77,141,29));
    border: 1px solid rgb(48,88,18);
}
.login-btn.notif:active { background-image: linear-gradient(to top, rgb(113,208,43), rgb(77,141,29)); }
.login-btn.notif:before {
    content: '\f0f3';
    font-family: 'Font Awesome 5 Free';
}
/*** ESTATÍSTICAS
======================================= ***/
 
.block { background-color: #fff; }
 
.block a:link,
.block a:visited {
    color: #444;
}
 
.block .h3 {
    font-size: 20px;
    border: none;
}
 
.block .h3 i {
    height: 28px;
    line-height: 30px;
    margin-right: 10px;
    color: #39c;
}
 
.stats-tabs br { display: none; }
 
.stats-tabs section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}
 
.stats-tabs input { display: none; }
 
.stats-tabs label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}
 
.stats-tabs label:before {
  font-family: "Font Awesome 5 Free";
  margin-right: 10px;
}
 
.stats-tabs label[for*='1']:before { content: '\f0c0'; }
.stats-tabs label[for*='2']:before { content: '\f1fd'; }
.stats-tabs label[for*='3']:before { content: '\f187'; }
 
.stats-tabs label:hover {
  color: #789;
  cursor: pointer;
}
 
.stats-tabs input:checked + label {
  color: #357FBF;
  border: 1px solid #abc;
  border-top: 2px solid #357FBF;
  border-bottom: 1px solid #fff;
}
 
.stats-tabs #tab1:checked ~ #content1,
.stats-tabs #tab2:checked ~ #content2,
.stats-tabs #tab3:checked ~ #content3 { display: block; }
 
@media screen and (max-width: 800px) {
  .stats-tabs label {
    font-size: 0;
  }
  .stats-tabs label:before {
    margin: 0;
    font-size: 18px;
  }
}
 
@media screen and (max-width: 500px) {
  .stats-tabs label {
    padding: 15px;
  }
}
 
.block .legend { font-size: 0px; }
 
.block .legend b a {
    font-size: 13px;
    font-weight: 600;
}
 
.block .legend b a::after {
    content: ", ";
    font-weight: 400;
    color: #000;
}
 
.block .legend b:last-child a::after { content: ""; }

e diga se ficou no seu aguardo!


Atenciosamente,
pedxz.

Não foi, ficou assim:


Poderia me fala onde vou para aumenta ou abaixa, aí ficar melhor, porque eu não preciso ficar falando toda hora que não foi.

Eu simplesmente mudei o tamanho para o original da imagem; Altere a folha de estilo para:

Código:

.copyright {
    border-top: 5px solid #394248;
    background: #394248;
    padding-top: 1em;
}
 
.footerbar-system { padding-bottom: 1.7rem; }
 
.copyright-info div {
  height: max-content;
  width: 50%;
}
 
.copyright-info div:not(:first-child) { margin-left: 1em; }
 
.copyright-info div > h3 {
    color: wheat;
    font-weight: bolder;
    border: 0;
    margin-bottom: 0!important;
}
 
.copyright div > p { overflow-wrap: break-word; }
 
.copyright-info {
    display: flex!important;
    align-items: stretch;
    max-width: 100%;
    justify-content: flex-end;
}
 
.admin_link {
    position: fixed;
    z-index: 999;
    bottom: 5%;
    right: 5%;
}
 
.admin_link br { display: none; }
.admin_link a {
    background: #239df7;
    border: 4px solid #3793ff;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
    height: max-content;
    width: max-content;
    text-align: center;
    transition: all .5s;
}
.admin_link a:hover {
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1), inset 0 0 1px 1px rgba(0,0,0,.1);
}
/*  HEADER
**===================*/
.headerbar {
    background-color: black;
    background-image: url(https://i.servimg.com/u/f73/20/21/08/06/screen11.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto;
    height: 360px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
/*--- MENU ---*/
.menu {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: rgb(20,20,20);
    box-shadow: inset rgba(0, 0, 0, 0.20) 0px -2px 0px;
    height: 70px;
    z-index: 999;
}
 
.menu .menu-container {
    width: 95%;
    margin: 0 auto;
}
 
/*-- Links do menu --*/
.menu .menu-container .menu-link-wrapper {
    width: 40%;
    float: left;
}
 
.menu-link-wrapper .menu-link {
    background-color: rgba(190, 190, 190, 0.05);
    position: relative;
    display: inline-block;
    margin-right: 6px;
    width: 70px;
    height: 70px;
    cursor: pointer;
}
 
.menu-link-wrapper .menu-link .icon {
    width: 100%;
    filter: grayscale(100%);
    height: 70px;
    background-position: center;
    background-repeat: no-repeat;
}
 
.menu-link-wrapper .menu-link:hover .icon { filter: grayscale(0%); }
 
.menu-link-wrapper .menu-link .icon.forum { background-image: url(https://i.servimg.com/u/f13/19/76/41/44/15889710.png); }
.menu-link-wrapper .menu-link .icon.portal { background-image: url(https://images.habbo.com/c_images/album1584/FR92A.gif); }
.menu-link-wrapper .menu-link .icon.membros { background-image: url(https://images.habbo.com/c_images/album1584/FR91A.gif); }
.menu-link-wrapper .menu-link .icon.grupos { background-image: url(https://images.habbo.com/c_images/album1584/PT473.gif); }
 
.menu-link-wrapper .menu-link .text {
    border: 1px solid #2b2b2b;
    border-radius: 4px;
    background-color: #212121;
    box-shadow: 0 0 2px 1px rgba(255,255,255,.3) inset, 0 3px 9px rgba(0,0,0,.18);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 25px;
    color: #fff;
    position: absolute;
    bottom: -30px;
    left: -20px;
    z-index: 2;
    width: 108px;
    height: 28px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
    opacity: 0;
    -webkit-transition: .3s opacity;
    -moz-transition: .3s opacity;
    transition: .3s opacity;
}
 
.menu-link-wrapper .menu-link:hover .text {
    opacity: 1;
    -webkit-transition: .3s opacity;
    -moz-transition: .3s opacity;
    transition: .3s opacity;
}
 
.menu-link-wrapper .menu-link .text:after {
    position: absolute;
    top: -8px;
    left: calc(50% - 7px);
    content: '';
    -webkit-filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
    filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
    height: 0;
    width: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #464646;
}
 
/*-- Logo --*/
.menu .menu-container .menu-logo {
    background: url(https://i.imgur.com/1rMYtZV.gif) no-repeat center center;
    float: left;
    width: 28%;
    height: 70px;
}
 
/*--- HEADER BOX ---*/
.header-box {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(93, 89, 89, 0.8));
    width: 260px;
    height: 190px;
    border-radius: 10px;
    box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);
    font-size: 13px;
    padding: 5px;
    color: #fff;
    text-shadow: 0 2px rgba(0,0,0,0.5);
    position: absolute;
    bottom: 5%;
    right: 5%;
}
 
.header-box .box-title {
    font-size: 20px;
    text-align: center;
}
 
.header-box .box-content {
    margin: 5px;
}
 
.box-content a {
    display: block;
    color: #fff;
}
.box-content a:hover { text-shadow: 0 0 5px; }
 
.header-box .box-avatar {
    float: right;
    margin-top: -48%;
}
 
.box-logout {
    width: 100%;
}
 
.login-inputbox {
    background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(235,235,235));
    width: 240px;
    height: 40px;
    border: none;
    border-radius: 8px;
    margin: 5px;
    padding: 0 15px!important;
    font-size: 1em!important;
    cursor: auto!important;
    box-shadow: inset 0 -3px rgba(0,0,0,0.1), 0 0 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.1);
}
.login-inputbox:hover, .login-inputbox:focus { border-bottom: none!important; }
 
.login-btn {
    height: 40px;
    border-radius: 8px!important;
    margin: 2px;
    box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -3px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), 0 0 4px rgba(0,0,0,0.15)!important;
    color: #FFF;
    text-shadow: 0 2px rgba(0,0,0,0.2);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 1px 10px!important;
    cursor: pointer!important;
}
 
.login-btn.login {
    background-image: linear-gradient(to bottom, rgb(80,113,156), rgb(55,80,115));
    border: 1px solid rgb(46,65,93);
    width: 140px!important;
}
.login-btn.login:active { background-image: linear-gradient(to top, rgb(80,113,156), rgb(55,80,115)); }
 
.login-btn.register {
    background-image: linear-gradient(to bottom, rgb(113,208,43), rgb(77,141,29));
    border: 1px solid rgb(48,88,18);
    width: 100px;
}
.login-btn.register:active { background-image: linear-gradient(to top, rgb(113,208,43), rgb(77,141,29)); }
 
.login-btn.logout {
    background-image: linear-gradient(to bottom, rgb(207,72,46), rgb(144,50,32));
    border: 1px solid rgb(102,36,23);
    width: 140px;
    margin-top: 0;
}
.login-btn.logout:active { background-image: linear-gradient(to top, rgb(207,72,46), rgb(144,50,32)); }
 
.login-btn.mp, .login-btn.notif {
    width: 48px;
    outline: none;
    font-size: 15px;
}
 
.login-btn.mp {
    background-image: linear-gradient(to bottom, rgb(255,165,0), rgb(179,116,0));
    border: 1px solid rgb(103,66,0);
}
.login-btn.mp:active { background-image: linear-gradient(to top, rgb(255,165,0), rgb(179,116,0)); }
.login-btn.mp:before {
    content: '\f0e0';
    font-family: 'Font Awesome 5 Free';
}
 
a[data-status*="Nova"] .login-btn.mp:after {
    content: '';
    width: 7px;
    height: 7px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    margin-left: -1%;
    margin-top: -.3%;
}
 
 
.login-btn.notif {
    background-image: linear-gradient(to bottom, rgb(113,208,43), rgb(77,141,29));
    border: 1px solid rgb(48,88,18);
}
.login-btn.notif:active { background-image: linear-gradient(to top, rgb(113,208,43), rgb(77,141,29)); }
.login-btn.notif:before {
    content: '\f0f3';
    font-family: 'Font Awesome 5 Free';
}
/*** ESTATÍSTICAS
======================================= ***/
 
.block { background-color: #fff; }
 
.block a:link,
.block a:visited {
    color: #444;
}
 
.block .h3 {
    font-size: 20px;
    border: none;
}
 
.block .h3 i {
    height: 28px;
    line-height: 30px;
    margin-right: 10px;
    color: #39c;
}
 
.stats-tabs br { display: none; }
 
.stats-tabs section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}
 
.stats-tabs input { display: none; }
 
.stats-tabs label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}
 
.stats-tabs label:before {
  font-family: "Font Awesome 5 Free";
  margin-right: 10px;
}
 
.stats-tabs label[for*='1']:before { content: '\f0c0'; }
.stats-tabs label[for*='2']:before { content: '\f1fd'; }
.stats-tabs label[for*='3']:before { content: '\f187'; }
 
.stats-tabs label:hover {
  color: #789;
  cursor: pointer;
}
 
.stats-tabs input:checked + label {
  color: #357FBF;
  border: 1px solid #abc;
  border-top: 2px solid #357FBF;
  border-bottom: 1px solid #fff;
}
 
.stats-tabs #tab1:checked ~ #content1,
.stats-tabs #tab2:checked ~ #content2,
.stats-tabs #tab3:checked ~ #content3 { display: block; }
 
@media screen and (max-width: 800px) {
  .stats-tabs label {
    font-size: 0;
  }
  .stats-tabs label:before {
    margin: 0;
    font-size: 18px;
  }
}
 
@media screen and (max-width: 500px) {
  .stats-tabs label {
    padding: 15px;
  }
}
 
.block .legend { font-size: 0px; }
 
.block .legend b a {
    font-size: 13px;
    font-weight: 600;
}
 
.block .legend b a::after {
    content: ", ";
    font-weight: 400;
    color: #000;
}
 
.block .legend b:last-child a::after { content: ""; }

adicionei o banner em baixo centralizado, sem a lacuna.

Não funcionou, eu quero que o banne preencha o espaço todo.

Chanp escreveu:Isso ocorre porque a imagem não está com a resolução adequada. A resolução adequada para este menu é 1350x350.

Icaro325 escreveu:Não funcionou, eu quero que o banne preencha o espaço todo.

Com a imagem proposta é o máximo que lhe posso ajudar! O senhor pode usufruir gratuitamente do nosso setor de criações gráficas pedido o aumento do banner, desculpe

Ok, obrigado

Olá,

Adiciona esse código na sua Folha de estilo CSS

Código:


div#page-header {
    margin-top: 70px;
}
.headerbar {
    background-color: black;
    background-image: url(https://i.servimg.com/u/f73/20/21/08/06/screen11.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain!important;
    height: 271px!important;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative!important;
}

Até mais!

Como a questão já tinha sido solucionada, estarei dando a questão como resolvida.

Tópico resolvido Movido para "Questões resolvidas".