Detalhes da questão

Endereço do fórum: http://vgnfamily.forumais.com
Versão do fórum: punBB

Descrição

Recentemente botei um widget de TeamSpeak, no fórum porem ele fica bugado.

Eu botei uma imagem no tamanho de: 300x200 e ele fica assim: https://i.imgur.com/XT9uGpP.jpg
Com a imagem pequena link da imagem: https://i.imgur.com/w3aGrMB.png

Código do widget caso precisar:

Código:

<a href="ts3server://ts.brasilplaygames.com.br/?port=porta-do-servidor" class="fa-custom-widget-teamspeak">  <span class="fa-custom-widget-teamspeak-background"></span>  <span class="fa-custom-widget-teamspeak-default">TEAMSPEAK 3</span>  <span class="fa-custom-widget-teamspeak-hover">CONECTAR-SE</span></a>  <style>
  .fa-custom-widget-teamspeak {
    display: block;
    height: 200px;
    position: relative;
    border: 1px #fff solid;
    width: 100%;
    overflow: hidden;
  }
 
  .fa-custom-widget-teamspeak-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(http://i.imgur.com/w3aGrMB.png) no-repeat center center;
    background-size: 70% auto;
    transition: .5s ease filter;
  }
 
  .fa-custom-widget-teamspeak-default,
  .fa-custom-widget-teamspeak-hover {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    transform: translate(0%, -10%);
    display: block;
    line-height: 30px;
    margin-top: -15px;
    background-color: #333;
    color: #fff;
    opacity: 1;
    transition: .5s ease;
    transition-property: transform, opacity;
  }
 
  .fa-custom-widget-teamspeak-hover {
    background-color: #fff;
    color: #333;
    opacity: 0;
  }
 
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-default,
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-hover {
    transform: translate(0%, 10%);
  }
  
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-default {
    opacity: 0;
  }
 
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-hover{
    opacity: 1;
  }
 
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-background {
    filter: blur(10px);
  }
</style>

Olá autor, boa tarde.

Não é bug , você está utilizando uma propriedade que faz diminuir/aumentar a proporção da imagem, e está no valor 70%,ou seja você ta usando 70/100% do valor original dela.

Para ter o tamanho padrão mesmo da imagem, procure por:

Código:

background-size: 70% auto;

E troque por:

Código:

background-size: 100% auto;

Até mais.

É realmente.. quando boto a imagem, percebi que só fica no meio assim: https://i.imgur.com/8YX2Vac.jpg ao invés de ficar só no meio é possível ocupar todo o espaço branco do widget com a imagem?

Como desejar, retire do seu css essa propriedade:

Código:

background-size: 100% auto;

E preencherá todo o widget.

Até mais.

Resolvido obg pode fechar.