Não repetir a imagem

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Não repetir a imagem

Mensagem por Slash! em 30/01/13, 09:01 am

Qual é minha questão:
Então galera, é aquele problema simples porém muito requisitado. Eis na minha página de HTML, o background fica repitindo e eu gostaria que não repetisse. Que em todas as telas, resoluções, etc, a imagem veja-se centralizada. (:

Já adianto e mando o código do parágrafo e da imagem:

Código:
body {
background-image: url("[background da página]");
font-family: Orator Std;
}
body a {
text-decoration: none;
color: #000000;



Att. Slash!

Endereço do meu fórum:
http://brasilhighvoltage.forumeiro.com

Versão do fórum:
PHPBB3


Última edição por Slash! em 30/01/13, 09:33 am, editado 1 vez(es)
avatar

Slash!
Nível 4

Masculino
Inscrito dia : 25/12/2012
Mensagens : 29
Pontos Ativos : 47

Ver perfil do usuário http://brasilhighvoltage.forumeiro.com

Resolvido Re: Não repetir a imagem

Mensagem por iPrompt em 30/01/13, 09:09 am

Olá,

Aqui esta utilize este código CSS

Código:
body {
background-repeat: no-repeat!important;
}

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Não repetir a imagem

Mensagem por Slash! em 30/01/13, 09:31 am

Ai amigo, funcionou, só que a imagem ficou assim:


Eu quero ela centralizada, pela tela toda. :/
avatar

Slash!
Nível 4

Masculino
Inscrito dia : 25/12/2012
Mensagens : 29
Pontos Ativos : 47

Ver perfil do usuário http://brasilhighvoltage.forumeiro.com

Resolvido Re: Não repetir a imagem

Mensagem por iPrompt em 30/01/13, 09:35 am

Olá,

Substitua o código por este

body {
background-repeat: no-repeat!important;
width: 250px;
height: 250px;
}

Vermelho: Vai alterando até que fique como deseja

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Não repetir a imagem

Mensagem por Mersiclagem41 em 30/01/13, 09:46 am

Tambem tava com um Problema parecido com esse.
Mais resolvi com o código que o Quakeline posto
avatar

Mersiclagem41
Novo membro

Masculino
Inscrito dia : 30/01/2013
Mensagens : 1
Pontos Ativos : 1

Ver perfil do usuário http://shutskins.forosactivos.net

Resolvido Re: Não repetir a imagem

Mensagem por Slash! em 30/01/13, 11:13 am

Amigo, tipo, aumenta os pixeis da tela(pode deixar ajustável sim), mas não ajusta a imagem que é o que quero. Repetindo novamente, quero ela centralizada na tela de todos que a acessem, independente da resolução da tela de cada um.

Aqui uma outra imagem pra entender(o espaço em branco é a sobra de px da tela, que no caso não está ajustada corretamente):
Obs: Eu mudei o background, só fiz um efeito espelho da imagem pra deixar a imagem maior. (:
avatar

Slash!
Nível 4

Masculino
Inscrito dia : 25/12/2012
Mensagens : 29
Pontos Ativos : 47

Ver perfil do usuário http://brasilhighvoltage.forumeiro.com

Resolvido Re: Não repetir a imagem

Mensagem por iPrompt em 30/01/13, 11:25 am

Olá,

Tente este

body {
background-repeat: no-repeat!important;
position: absolut!important;
left: 125px!important;
top: 125px;!important
}
Vermelho: Altere ate que fique como deseja

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Não repetir a imagem

Mensagem por Slash! em 30/01/13, 11:37 am

Argh, amigo, eu não estou sendo ignorante ou reclamando do seu esforço, pelo contrário! Mas vim aqui lhe dizer que não deu certo novamente. Espero que tenha paciência. Eu usei o código acima e o background não aparecia. Eu testei em vários valores como 0x0, 800x800, 1500x1000, 1500x0, 800x0, 0x1000, 0x300.. E bem, não consegui achar sequer uma aresta da imagem..

Haverá alguma outra solução? D:
avatar

Slash!
Nível 4

Masculino
Inscrito dia : 25/12/2012
Mensagens : 29
Pontos Ativos : 47

Ver perfil do usuário http://brasilhighvoltage.forumeiro.com

Resolvido Re: Não repetir a imagem

Mensagem por iPrompt em 30/01/13, 11:46 am

Olá,

Me passe o código HTML da página

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Não repetir a imagem

Mensagem por Slash! em 30/01/13, 11:56 am

Bem, aqui o código HTML cru sem os códigos que você mandou eu colocar.
Bom proveito. x)

Código:
<!DOCTYPE html>
<!-- saved from url=(0033)http://www.brasilhighvoltage.forumeiro.com/ -->
<!-- <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>      -->
      <title>Brasil High Voltage RPG</title>
   <style>
body {
background-image: url("http://imageshack.us/a/img13/5749/pinkfloydmushroom.jpg");
font-family: Orator Std;
}
body a {
text-decoration: none;
color: #000000;
}
.creditos {
box-shadow: 0px -1px 2px black;
background-color: #db8;
width: 100%;
left: 0px;
height: 24px;
bottom: 0px;
position: absolute;
}
.bpc {
font-size: 50px;
text-align: center;
left: 0%;
color: orange;
opacity: 0.9;
position: relative;
}
.informacoes2 {
text-align: left;
background-color: #000000;
width: 250px;
height: 100%;
position: absolute;
top: 0%;
left:75%;
font-size: 20px;
color: cyan;
opacity: 0.4;
border-left: 2px solid #FFFFFF;
}
.informacoes2:hover {
opacity: 0.6;
}
.forum {
bottom: 15%;
left: 8%;
font-size: 40px;
position: absolute;
background-color: gray;
width: 150px;
text-align: center;
opacity: 0.6;
border-radius: 5px;
}
.forum:hover {
opacity: 0.8;
}
.samp {
bottom: 8%;
left: 43%;
font-size: 40px;
position: absolute;
background-color: gray;
width: 150px;
text-align: center;
opacity: 0.6;
border-radius: 5px;
}
.samp:hover {
opacity: 0.8;
}
.Servidor {
bottom: 15%;
left: 78%;
font-size: 40px;
position: absolute;
background-color: gray;
width: 190px;
text-align: center;
opacity: 0.6;
border-radius: 5px;
}
.Servidor:hover {
opacity: 0.8;
}

</style></head>

  <body>
  <div class="bpc"><img src="http://img843.imageshack.us/img843/7424/avisox.png"<br></div>
   

<br>
    <center><img src="http://imageshack.us/a/img717/3783/capath.png" border="0" class="borderimage" alt="" title="BSG>NSG Presents: Brasil High Voltage!"/></center>


   <a href="http://www.brasilhighvoltage.forumeiro.com/portal"><div class="forum" alt="" title="Ir para o Forum">Portal</div></a>
   <a href="http://files.sa-mp.com/sa-mp-0.3e-install.exe"><div class="samp" alt="" title="SA:MP 0.3 Download">SA:MP</div></a>
<a href="samp://108.61.71.214:7777"><div class="Servidor" alt="" title="Ir para o Servidor">Servidor</div></a>
      
   </body></html>
<script type='text/javascript'>
// <![CDATA[

}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

#edit: É uma página inicial de HTML, como você deve saber, creio. É daquele tipo que é antes de você entrar no fórum, tem aquela page intro.. Só pra constar mesmo.
avatar

Slash!
Nível 4

Masculino
Inscrito dia : 25/12/2012
Mensagens : 29
Pontos Ativos : 47

Ver perfil do usuário http://brasilhighvoltage.forumeiro.com

Resolvido Re: Não repetir a imagem

Mensagem por iPrompt em 30/01/13, 12:37 pm

Olá,

Tente troca por este

Código:
<!DOCTYPE html>
<!-- saved from url=(0033)http://www.brasilhighvoltage.forumeiro.com/ -->
<!-- <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>      -->
      <title>Brasil High Voltage RPG</title>
  <style>
body {
background-image: url("http://imageshack.us/a/img13/5749/pinkfloydmushroom.jpg");
font-family: Orator Std;
}
body {
background-repeat: no-repeat!important;
width: 500px;
height: 550px;
}
body a {
text-decoration: none;
color: #000000;
}
.creditos {
box-shadow: 0px -1px 2px black;
background-color: #db8;
width: 100%;
left: 0px;
height: 24px;
bottom: 0px;
position: absolute;
}
.bpc {
font-size: 50px;
text-align: center;
left: 0%;
color: orange;
opacity: 0.9;
position: relative;
}
.informacoes2 {
text-align: left;
background-color: #000000;
width: 250px;
height: 100%;
position: absolute;
top: 0%;
left:75%;
font-size: 20px;
color: cyan;
opacity: 0.4;
border-left: 2px solid #FFFFFF;
}
.informacoes2:hover {
opacity: 0.6;
}
.forum {
bottom: 15%;
left: 8%;
font-size: 40px;
position: absolute;
background-color: gray;
width: 150px;
text-align: center;
opacity: 0.6;
border-radius: 5px;
}
.forum:hover {
opacity: 0.8;
}
.samp {
bottom: 8%;
left: 43%;
font-size: 40px;
position: absolute;
background-color: gray;
width: 150px;
text-align: center;
opacity: 0.6;
border-radius: 5px;
}
.samp:hover {
opacity: 0.8;
}
.Servidor {
bottom: 15%;
left: 78%;
font-size: 40px;
position: absolute;
background-color: gray;
width: 190px;
text-align: center;
opacity: 0.6;
border-radius: 5px;
}
.Servidor:hover {
opacity: 0.8;
}

</style></head>

  <body>
  <div class="bpc"><img src="http://img843.imageshack.us/img843/7424/avisox.png"<br></div>
 

<br>
    <center><img src="http://imageshack.us/a/img717/3783/capath.png" border="0" class="borderimage" alt="" title="BSG>NSG Presents: Brasil High Voltage!"/></center>


  <a href="http://www.brasilhighvoltage.forumeiro.com/portal"><div class="forum" alt="" title="Ir para o Forum">Portal</div></a>
  <a href="http://files.sa-mp.com/sa-mp-0.3e-install.exe"><div class="samp" alt="" title="SA:MP 0.3 Download">SA:MP</div></a>
<a href="samp://108.61.71.214:7777"><div class="Servidor" alt="" title="Ir para o Servidor">Servidor</div></a>
     
  </body></html>
<script type='text/javascript'>
// <![CDATA[

}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Observação: Se o membro tiver uma resolução diferente que a sua a página irá ficar desconfigurada isso não tem como resolver
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Não repetir a imagem

Mensagem por Slash! em 30/01/13, 12:43 pm

Bem, basicamente você fez o que já tinha mandado eu fazer, só que com a resolução ajustada.. Vou ter que pesquisar por outro método mais... decisivo. Mas bem, obrigado pela ajuda de qualquer forma, man. Feliz
avatar

Slash!
Nível 4

Masculino
Inscrito dia : 25/12/2012
Mensagens : 29
Pontos Ativos : 47

Ver perfil do usuário http://brasilhighvoltage.forumeiro.com

Resolvido Re: Não repetir a imagem

Mensagem por VitorChaves em 01/02/13, 12:21 am

Olá amigo, veja se resolve seu problema:

Código:
.body{
background-position:center center;
position:absolute;
}

Melhores Cumprimentos,
Vítor Chaves.
avatar

VitorChaves
Nível 3

Masculino
Inscrito dia : 31/12/2012
Mensagens : 19
Pontos Ativos : 32

Ver perfil do usuário http://hardlifebrasil.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum