corrigir imagem de fundo com codigo css

Prezados senhores boa tarde,

Coloquei uma imagem de fundo no meu background, mas ainda ficou as laterais pretas.

Gostaria que a imagem ficasse no fundo por completo eliminando essas laterais pretas.

versão do forum PHPBB2

www.clan-nitro.com

codigo que estou usando

Código:

body {
background-attachment: fixed;
background-image: url("http://i126.photobucket.com/albums/p108/lucaspaulino123/fundosite150011.jpg");
background-position: center !important;
background-repeat: no-repeat !important;
}

imagem do erro

Olá!
Isto é por que seu background é pequeno, e não está conseguindo atingir até a largura máxima da tela, tem um modo, no qual irá repetir o background, que é este CSS:

body {
background-attachment: fixed;
background-image: url("https://2img.net/h/i126.photobucket.com/albums/p108/lucaspaulino123/fundosite150011.jpg");
background-position: center !important;
background-repeat: repeat !important;
}

Até mais!

mas não quero repetir, se eu aumentar a imagem vai ficar correto?

Obrigado desde já!!!

Olá!
Sim senhor, irá ficar normal, é necessário de uma imagem grande o bastante para cobrir toda a tela.

Até mais!

infelizmente não é esse o problema, mudei o tamanho da imagem e não resolveu, a lateral preta continua do mesmo jeito e tamanho.

a imagem está com mais de 2000px!!!

Boa tarde,

O senhor pode tentar com o código abaixo, veja:

Código:

body {
background-attachment: fixed;
background-image: url("http://i126.photobucket.com/albums/p108/lucaspaulino123/fundosite150011.jpg");
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 20px;
}

Abraços.

Amigos continua do mesmo jeito. Nada alterou.

Mudei os valores da linha "border-radius: 20px;" tanto para cima quanto para baixo e nao mudou em nada.

Obrigado por enquanto.

Troque por este o código querido:

Código:

body {background-attachment: fixed;background-image:url("http://i126.photobucket.com/albums/p108/lucaspaulino123/fundosite150011.jpg");background-position: center !important;background-repeat: no-repeat !important;border-radius: 20px !important; }

Abraços.

obrigado mais uma vez, mas ainda não resultou.

continua com a lateral preta, mudei a imagem para 5000 px e tambem nao resolveu.

Olá,

O código é este:

Código:

.bodyline {border: 1px solid transparent !important;}

Coloque no inicio de teu CSS.

Abraços.

as bordas do forum e do portal ficaram transparente, mas o background, onde está a imagem, ainda continua com as bordas pretas.

não resolveu.

segue meu css por completo ja com essa linha que vc escreveu acima:

Código:

.bodyline {border: 1px solid transparent !important;}
a {
text-decoration: none !important;
}

a {
text-decoration: none !important;
}

.bodyline{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 3px solid GRAY;
}
.catLeft,.forumline,.catHead,.thHead,th[nowrap=nowrap]{
-moz-border-top-right-radius: 1.0em;
-moz-border-top-left-radius: 1.0em;

-webkit-border-top-right-radius: 1.0em;
-webkit-border-top-left-radius: 1.0em;
}
* {
-moz-border-radius: 09px;
-webkit-border-radius: 09px;
}

body {
background-attachment: fixed;
background-image: url("http://i126.photobucket.com/albums/p108/lucaspaulino123/fundosite150011.jpg");
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 20px;
}

Olá,

Acho que encontrei o erro. Tente este código:

Código:

* {
-moz-border-radius: none !important;
-webkit-border-radius: 0px !important;
}

Se mesmo assim não dê certo, mande meu teu CSS.

não deu certo, colocando este codigo meu forum deixou as bordas quadradas, mas a lateral da imagem do fundo ainda permanece preta.

meu codigo css está assim:

Código:

a {
text-decoration: none !important;
}

a {
text-decoration: none !important;
}

.bodyline{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 3px solid GRAY;
}
.catLeft,.forumline,.catHead,.thHead,th[nowrap=nowrap]{
-moz-border-top-right-radius: 1.0em;
-moz-border-top-left-radius: 1.0em;

-webkit-border-top-right-radius: 1.0em;
-webkit-border-top-left-radius: 1.0em;
}

* {
-moz-border-radius: 09px;
-webkit-border-radius: 09px;
}

body {
background-attachment: fixed;
background-image: url("http://i126.photobucket.com/albums/p108/lucaspaulino123/fundosite150011.jpg");
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 1px;
}

Troque teu CSS por este:

Código:

a {
text-decoration: none !important;
}

a {
text-decoration: none !important;
}

.bodyline{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 3px solid GRAY;
}
.catLeft,.forumline,.catHead,.thHead,th[nowrap=nowrap]{
-moz-border-top-right-radius: 1.0em;
-moz-border-top-left-radius: 1.0em;

-webkit-border-top-right-radius: 1.0em;
-webkit-border-top-left-radius: 1.0em;
}

* {
-moz-border-radius: 9px;
-webkit-border-radius: none;
}

body {
background-attachment: fixed;
background-image: url("http://i126.photobucket.com/albums/p108/lucaspaulino123/fundosite150011.jpg");
background-position: center !important;
background-repeat: no-repeat !important;
}

a unica coisa que alterou foi as linhas das bordas das categorias do forum, mas infelizmente não teve alteração na lateral da imagem de fundo do site.

continua com as laterais da imagem do background pretas.

Olá,

Mas isto ocorreu depois que o senhor fez o que? Qual alteração no fórum?

Até mais.

antes nao tinha imagem no fundo do site, procurei os códigos através dos posts do FDF, mas sempre ficou assim, com essas laterais sobressalentes.

Já mudei o tamanho da imagem e nada adiantou. A inserção desta imagem foi a ultima coisa que fiz, pode reparar que é o ultimo codigo que coloquei na minha folha CSS.

Mas vendo outros foruns aqui, pude perceber que é um erro, que é possivel deixar a imagem por completo no fundo.

Será que pode ser por causa das cores?

na parte "GESTÃO DE IMAGENS>Imagem do fundo da página:" está em branco, deveria colocar alguma imagem ali ou so colocar pelo codigo CSS mesmo?

Ok, troque teu código por este:

Código:

body {
background-attachment: relative;
background: url("http://i126.photobucket.com/albums/p108/lucaspaulino123/fundosite150011.jpg");
background-position: center !important;
background-repeat: no-repeat !important;
}

não resolveu, a imagem do fundo sumiu, ficando branco (transparente).

Será que pode ser por causa das cores?

na parte "GESTÃO DE IMAGENS>Imagem do fundo da página:" está em branco, deveria colocar alguma imagem ali ou so colocar pelo codigo CSS mesmo?

Olá!

Qual seria o problema que até agora ainda não vi? caso esteja falando sobre a barra preta que fica ao lado do bg, não há como fazer nada, sempre terá um computador de resolução diferente do seu, assim exibindo um bg de dimensão diferente.

Até mais!

Olá querido "gameover_br" para que o fundo ocupe todo seu espaço no site, sugiro que vá na parte "GESTÃO DE IMAGENS>Imagem do fundo da página:" como citou. Acho que este erro possa ser por causa de algum código no seu CSS que esteja impedindo. Eu particularmente, não gosto de colocar por CSS. Depois de ter feito aquele passo. Acrescente isto em seu CSS:

Código:

body {
background-attachment: fixed;
background-position: center !important;
background-repeat: no-repeat !important;
}

Espero que funcione.
Att,
LuizLopes.

Obrigado seender, mas existe uma forma com certeza.

Vários foruns é visualizado em resoluções diferentes e a imagem se adequa a mesma e mesmo se não fosse assim já coloquei diversos tamanhos de imagens e a barra não saiu, se fosse desta forma era pra imagem ou ficar normal ou ficar maior ou ficar menor que o monitor.

Sem contar que já visualizei em 3 monitores de tamanhos diferentes e a barra preta no bg fica sempre do mesmo jeito.

Por falta de conhecimento não sei resolver, mas tenho certeza que há solução, pois já vi em muitos outros foruns do FDF.

Obrigado.

Gamer Over. Acho que não viu minha postagem logo acima ? Resolveu seu problema ?

obrigado luiz, mas ainda continua igual.

ja coloquei outras imagens anteriormente e as mesmas ou ficavam duplicadas (quando menor que o monitor) ou cortadas ( quando maior que o monitor), mas sempre pegando a tela toda.

essa barra lateral nunca tinha visto, até pq ja coloquei imagens com 5000px e ainda continua a barra.

obrigado a todos ate agora e continuo no aguardo.

Olá. Acho que identifiquei o erro. Coloque a imagem na Gestão de imagens e adicione este código no seu CSS:

Código:

body {
background-attachment: fixed;
background-position: center !important;
background-repeat: no-repeat !important;
background-border: 0px !important;
}

não deu luiz, obrigado.

Tente este: (Ainda com a imagem na gestão)

Código:

body {
background-attachment: fixed;
background-repeat: no-repeat !important;
}

desta vez a imagem ficou correto na borda esquerda, mas não ficou centralizada e a imagem ficou menor.

troquei a imagem por uma maior e mesmo assim ficou menor e não centralizada.

existe um codigo para "esticar" a imagem?

Olá novamente. Existem sim. Vamos tentar.

Código:

body {
background-width:1000px;
background-height:1000px;
background-attachment: fixed;
background-repeat: no-repeat !important;
}

NOTA: Tomei conhecimento que o erro que está provocando isto seria a imagem centralizada, na qual não ocuparia todo o espaço e o deixaria obrigado a ficar em preto. Com este novo código a imagem não ficará centralizada, mas como ficará maior, irá dar o mesmo tom

OBS: Continue com a imagem em gestão.

OBS²: Troque "1000px" em width e height por o tamanho que deseja, aconselho que tente com 1000px e já terá uma noção.

coloquei e realmente a imagem nao ficou centralizada.

mudei os valores

background-width:XXXpx;
background-height:XXXpx;

para valores altissimos e mesmo assim a imagem continuou menor e nao centralizada.

obrigado mais uma vez...

Creio que não viu isto:

OBS²: Troque "1000px" em width e height por o tamanho que deseja, aconselho que tente com 1000px e já terá uma noção.

Tentou por 1000px ?

sim, cheguei a colocar altura 800 e largura 2000, mas a imagem continuou do mesmo tamanho...e nao centralizada...

a resolução da imagem é 5000px

Tente colocar a imagem para 5000px nos dois valores.

Não mudou em nada, a imagem continua do mesmo tamanho (menor) que a resolução do forum (1280).

Retire o código CSS, deixe apenas a imagem na gestão.

agora duplicou a imagem, mas saiu as laterais pretas...

é preciso agora não duplicar...

muito obrigado ate agora....

Adicione apenas isto em seu CSS:

Código:

body {
background-attachment: fixed; !important;
background-repeat: no-repeat !important;
}

Se não funcionar coloque isto:

Código:

body {
background-repeat: no-repeat !important;
}

Se também não vier a funcionar, coloque apenas isto:

Código:

body {
background-attachment: fixed; !important;
}

ai meu deus!!!

CODIGO 1 = parou de duplicar, mas nao ficou centralizada e ficou menor.

CODIGO 2 = a mesma coisa que no codigo 1

CODIGO 3 = ficou sem as laterais pretas, mas duplicou a imagem.

É verdade, tomei conhecimento do que faltava, apenas um código.Mas não irei desistir até conseguir resolver seu problema. Tente este Css com a imagem em questão:

body {
background-size: contain;
background-attachment: fixed;
background-repeat: no-repeat !important;
}

Se quiser centralizado coloque:

body {
background-size: contain;
background-attachment: fixed;
background-position: center !important;
background-repeat: no-repeat !important;
}

Creio que agora possa funcionar.

Nao deu, o primeiro codigo a imagem não fica centralizada e fica menor.

o segundo codigo fica centralizada mas com as laterais pretas ainda...

troquei a imagem por uma bem maior e mesmo assim os problemas sao os mesmos.

muito obrigado luiz, fico no aguardo.

Tente este:

body {
background-size: 100%;
background-attachment: fixed;
background-position: center !important;
background-repeat: no-repeat !important;
}

Olá!

Aceda á "Folha de estilos CSS"
Painel de Controle Visualização Imagens e Cores Cores Folha de estilos CSS

Código:

body { background-image: url("https://2img.net/h/i126.photobucket.com/albums/p108/lucaspaulino123/fundosite150011.jpg"); background-repeat: no-repeat!important; }

Valide.

Melhores cumprimentos,
Today

AEEEEEEEEEEEEE

vc é o cara luiz!!!! muita paciencia e dedicação para me ajudar.

MUITO OBRIGADO MESMO!!!!!! ESTAVA TENTANDO ISSO A TEMPOS E NAO CONSEGUIA...

PARABENS E OBRIGADO, VC MANDA MUITO BEM!!!

-------------------------------

obrigado today, mas o luiz resolveu...