Banner fica com a imagem distorcida

3 participantes

Ir para baixo

Tópico resolvido Banner fica com a imagem distorcida

Mensagem por EDU2010 03.05.19 3:18

Detalhes da questão


Endereço do fórum: http://isadorapompeo.forumeiros.com/
Versão do fórum: ModernBB

Descrição


A imagem quando coloco fica distorcida , estou colocando pela folha de estilho CSS

Segue imagem original
Banner fica com a imagem distorcida  Isa10



Como esta ficando
Banner fica com a imagem distorcida  110


Meu CSS Atual

Código:
#logo {
float: none !important;
}
.navbar {
text-align: center !important;
margin-top: -285x !important;
}
/******logo tamanho*****/
#logo {
display: none !important;
}
.headerbar {
    background-color: #FFFAFA!important;
    background-image: url(https://i.servimg.com/u/f39/15/98/91/46/d873f410.jpg)!important;
    height: 250px!important;
    background-position: top!important;
}
/*******fim logo tamanho ******/

.mod-top-row .mod-top-desc {
    bottom: 0;
    font-size: 1.1rem;
    height: 24px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background-color: #FF0303;
}

/***** centralizar baixo e cima botão buscar *******/
#search-box {
margin-top: 160px !important;
}
/***** fim centralizar baixo e cima botão buscar *******/

#search-box #keywords {
    background-color: grey !important;
}

/*** ocultar menu****/
a.mainmenu[href="/calendar"], [href="/faq"], [href="/groups"], [href="/register"], [href="/memberlist"], [href=""], [href="/search"], [href="/profile?mode=editprofile"], [href=""], [href="/gallery/index.htm"]
{display: none !important}
a#logout {display: none !important;}


/****m fim ocultar menu******/


/******* cor fundo wiget ********/
.module {
background-color:#C1CDCD !important
}

/******** fim da fundo de widget *********/

/***** cor barra  widget *******/
.module .h3 {
    background-color: #3B5995!important;
}

/****** fim cor barra wifget *****/

/******  tirar cor fundo onde fica banner ******/
.headerbar {
    background-color: #EEE9E9!important;
  }

  /******* fim retirar cor banner *****/
 


/***** ACERTAR TAMANHO BANNER *****/
.headerbar {
  width: 100% !important;
  background-size:100% 100% !important;
}
/******* FIM ACERTAR BANNER ******/

/**** imagem se ajustarem *****/
a img,
.module img {
  max-width: 100%!important;
  height: auto!important;
}


/**** imagem fim se ajustarem ****/
EDU2010
EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2308
Pontos : 3631

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner fica com a imagem distorcida

Mensagem por EDU2010 04.05.19 13:55

Alguem ai , ajuda .............. Welcome FdF
EDU2010
EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2308
Pontos : 3631

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner fica com a imagem distorcida

Mensagem por First 07.05.19 5:46

Olá @EDU2010,

Aparentemente não tem problemas com o seu código CSS, o problema persiste na qualidade da imagem, por isso a 'distorção' da imagem e a péssima resolução. Recomendo-o que faça uma nova imagem, com uma qualidade, proporção e tamanho maior, assim, poderemos modificar a imagem com códigos.

Espero ter sido claro e especifico.


Atenciosamente,
First.
First
First
Super Membro

Membro desde : 13/07/2013
Mensagens : 1313
Pontos : 1884

http://www.ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner fica com a imagem distorcida

Mensagem por Roevs 07.05.19 20:41

Olá,

Substitua o seu CSS por esse

Código:
#logo {
float: none !important;
}
.navbar {
text-align: center !important;
margin-top: -285x !important;
}
/******logo tamanho*****/
#logo {
display: none !important;
}
.headerbar {
    background-color: #FFFAFA!important;
    background-image: url(https://i.servimg.com/u/f39/15/98/91/46/d873f410.jpg)!important;
    height: 250px!important;
    background-position: top!important;
}
/*******fim logo tamanho ******/
 
.mod-top-row .mod-top-desc {
    bottom: 0;
    font-size: 1.1rem;
    height: 24px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background-color: #FF0303;
}
 
/***** centralizar baixo e cima botão buscar *******/
#search-box {
margin-top: 160px !important;
}
/***** fim centralizar baixo e cima botão buscar *******/
 
#search-box #keywords {
    background-color: grey !important;
}
 
/*** ocultar menu****/
a.mainmenu[href="/calendar"], [href="/faq"], [href="/groups"], [href="/register"], [href="/memberlist"], [href=""], [href="/search"], [href="/profile?mode=editprofile"], [href=""], [href="/gallery/index.htm"]
{display: none !important}
a#logout {display: none !important;}
 
 
/****m fim ocultar menu******/
 
 
/******* cor fundo wiget ********/
.module {
background-color:#C1CDCD !important
}
 
/******** fim da fundo de widget *********/
 
/***** cor barra  widget *******/
.module .h3 {
    background-color: #3B5995!important;
}
 
/****** fim cor barra wifget *****/
 
/******  tirar cor fundo onde fica banner ******/
.headerbar {
    background-color: #EEE9E9!important;
  }
 
  /******* fim retirar cor banner *****/
 
 
 
/***** ACERTAR TAMANHO BANNER *****/
.headerbar {
  width: 100% !important;
  background-size: auto!important;
}
/******* FIM ACERTAR BANNER ******/
 
/**** imagem se ajustarem *****/
a img,
.module img {
  max-width: 100%!important;
  height: auto!important;
}
 
 
/**** imagem fim se ajustarem ****/

Até mais!
Roevs
Roevs
Membro Entusiasta

Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343

https://www.sololevelingrpg.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner fica com a imagem distorcida

Mensagem por EDU2010 08.05.19 1:20


Só que não ficou a tela toda , ficou apenas no centro desta forma que fez ...
EDU2010
EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2308
Pontos : 3631

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner fica com a imagem distorcida

Mensagem por Roevs 08.05.19 12:56

Olá,

Substitua a sua Folha de estilo CSS pela abaixo

Código:
#logo {
float: none !important;
}
.navbar {
text-align: center !important;
margin-top: -285x !important;
}
/******logo tamanho*****/
#logo {
display: none !important;
}
.headerbar {
    background-color: #FFFAFA!important;
    background-image: url(https://i.servimg.com/u/f39/15/98/91/46/d873f410.jpg)!important;
    height: 250px!important;
    background-position: top!important;
}
/*******fim logo tamanho ******/
 
.mod-top-row .mod-top-desc {
    bottom: 0;
    font-size: 1.1rem;
    height: 24px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background-color: #FF0303;
}
 
/***** centralizar baixo e cima botão buscar *******/
#search-box {
margin-top: 160px !important;
}
/***** fim centralizar baixo e cima botão buscar *******/
 
#search-box #keywords {
    background-color: grey !important;
}
 
/*** ocultar menu****/
a.mainmenu[href="/calendar"], [href="/faq"], [href="/groups"], [href="/register"], [href="/memberlist"], [href=""], [href="/search"], [href="/profile?mode=editprofile"], [href=""], [href="/gallery/index.htm"]
{display: none !important}
a#logout {display: none !important;}
 
 
/****m fim ocultar menu******/
 
 
/******* cor fundo wiget ********/
.module {
background-color:#C1CDCD !important
}
 
/******** fim da fundo de widget *********/
 
/***** cor barra  widget *******/
.module .h3 {
    background-color: #3B5995!important;
}
 
/****** fim cor barra wifget *****/
 
/******  tirar cor fundo onde fica banner ******/
.headerbar {
    background-color: #EEE9E9!important;
  }
 
  /******* fim retirar cor banner *****/
 
 
 
/***** ACERTAR TAMANHO BANNER *****/
.headerbar {
  width: 100% !important;
  background-size: cover!important;
}
/******* FIM ACERTAR BANNER ******/
 
/**** imagem se ajustarem *****/
a img,
.module img {
  max-width: 100%!important;
  height: auto!important;
}
 
 
/**** imagem fim se ajustarem ****/

Até mais!
Roevs
Roevs
Membro Entusiasta

Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343

https://www.sololevelingrpg.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner fica com a imagem distorcida

Mensagem por Convidado 13.05.19 13:50

Questão abandonada

Esta questão foi abandonada pelo seu autor, mas foi considerada resolvida pela equipa de suporte.


De acordo com o regulamento do setor de suporte, Art. 5/Deveres, tópicos com 5 dias serão arquivados. Apesar de abandonado, este tópico tem uma solução e portanto será marcado como resolvido e movido para o arquivo de questões resolvidas.
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos