Logo fixado

Detalhes da questão

Endereço do fórum: http://www.brasilplayforever.com/forum
Versão do fórum: phpBB3

Descrição

Olá,

Estava querendo utilizar o código abaixo, só que há alguns problemas...

1º Não sei qual o tamanho de imagem para que fique certo no fórum, pois se eu colocar a logo atual, fica totalmente desproporcional...
2º Queria que a logo ficasse colada no topo e no cantos, sem ter visão do fundo... acho que dá para entender

Código:

.headerbar {
  background-image: url(LINK da imagem)!important;
  background-attachment: fixed!important;
  background-size: cover !important;
}
 
#logo {
  visibility: hidden;
}

Teria como me ajudar nisso? Qual tamanho de imagem ideal para que fique colada no topo e nos cantos e que fique proporcional ao meu fórum?

Bom dia.

Veja se é isto que pretende:

Código:

.headerbar {
    background-color: #fff;
    background-image: url(https://i.imgur.com/5SBIwYu.png);
    margin-bottom: 1%;
    padding: 0 5px;
    height: 250px;
    box-shadow: 0 2px 3px #000;
}

#logo {
    display: none;
}

Se já possuir estes elementos na sua folha de estilos, basta trocar por este código.
Espero ter ajudado.

Até! o/

Não exatamente...

Gostaria que a logo ficasse colada no topo e nos cantos: https://i.imgur.com/uS8e5U9.png (note que as flechinhas vermelhas significa onde é para a logo estar também).

Vale lembrar que é para ser fixa a logo (no estilo background-attachment: fixed)


Não precisa fazer com a minha logo, podem tentar usar uma outra imagem com outras dimensões, pois com essa não vai dar o resultado esperado.

Olá Eduardo Lima,

Tente o seguinte código:

Painel de controle>Visualização>Imagens e cores>Cores>Folha de estilo CSS

Código:

Código:

#logo {
    display: block;
    padding: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

Resulta?

Não senhora

Eduardo Lima escreveu:Não senhora

Certo! Retire o código repassado e troque por esse:

Código:

.headerbar {
    background-color: #fff;
    background-image: url(https://i.imgur.com/5SBIwYu.png);
    margin-bottom: 1%;
    padding: 0 5px;
    height: 250px;
    box-shadow: 0 2px 3px #000;
}

#logo {
    display: block;
    padding: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}


Não deu o resultado esperado: https://i.imgur.com/te3PP6H.png

Tem alguma coisa impedindo que a logo ultrapasse aquele limite ali... e eu não sei o que pode ser

Eduardo Lima escreveu:Não deu o resultado esperado: https://i.imgur.com/te3PP6H.png

Tem alguma coisa impedindo que a logo ultrapasse aquele limite ali... e eu não sei o que pode ser

Tenta o seguinte:

Tente marcar a opção Melhorar seu CSS como Não no painel de controle.

Vamos ver se resulta.

Obs: O código ainda deve permanecer.

Tá desativado já

Eduardo Lima escreveu:Tá desativado já

Estranho, eu testei o código e está funcionando corretamente. O senhor tem uma conta de teste para eu checar uma coisa?

Informações passadas por MP.

Eduardo Lima escreveu:Informações passadas por MP.

Por acaso o senhor colocou a logo em outro local, como:

Painel de controle>Visualização>Imagens e cores>Gestão das imagens>Logo do fórum

A imagem esta meia duplicada, creio que esteja ativa em outro local como citado acima. Caso sim, o senhor poderia retira-la.

É, kkk, perdão.

Retirei já.

Eduardo Lima escreveu:É, kkk, perdão.

Retirei já.

Agora ative melhorar sua CSS como SIM.

Reativado

Eduardo Lima escreveu:Reativado

O senhor esta usando o código repassado anteriormente por mim? Não vejo ele ativo.

Estou usando sim: https://i.imgur.com/vxRLL7K.png

Troque o código por esse:

Código:


div#logo-desc {
    background: url(https://i.imgur.com/5SBIwYu.png) no-repeat center;
    height: 192px;
    margin-left: -12px;
    margin-top: -5px;
}

Caso não funcione troque novamente por esse:

Código:

div#logo-desc {
    background-repeat: no-repeat;
    background-size: contain;
    height: 193px;
    margin-left: -12px;
    margin-top: -5px;
    width: 1353px;
}

Obs: O segundo código deverá haver uma imagem fixa na logo, ou senha na gestao das imagem em painel de controle.