Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosNão repetir a imagem
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Não repetir a imagem
por Slash! 30.01.13 11:01
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:
Att. Slash!
Endereço do meu fórum:
http://brasilhighvoltage.forumeiro.com
Versão do fórum:
PHPBB3
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 11:33, editado 1 vez(es)
Slash!- Novo Membro
- Membro desde : 25/12/2012
Mensagens : 29
Pontos : 47 -
Re: Não repetir a imagem
por Roevs 30.01.13 11:09
Olá,
Aqui esta utilize este código CSS
Até
Aqui esta utilize este código CSS
- Código:
body {
background-repeat: no-repeat!important;
}
Até
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Re: Não repetir a imagem
por Slash! 30.01.13 11:31
Ai amigo, funcionou, só que a imagem ficou assim:
Eu quero ela centralizada, pela tela toda. :/
Eu quero ela centralizada, pela tela toda. :/
Slash!- Novo Membro
- Membro desde : 25/12/2012
Mensagens : 29
Pontos : 47 -
Re: Não repetir a imagem
por Roevs 30.01.13 11:35
Olá,
Substitua o código por este
Vermelho: Vai alterando até que fique como deseja
Até
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é
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Re: Não repetir a imagem
por Mersiclagem41 30.01.13 11:46
Tambem tava com um Problema parecido com esse.
Mais resolvi com o código que o Quakeline posto
Mais resolvi com o código que o Quakeline posto
Mersiclagem41- Novo Membro
- Membro desde : 30/01/2013
Mensagens : 1
Pontos : 1 -
Re: Não repetir a imagem
por Slash! 30.01.13 13:13
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. (:
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. (:
Slash!- Novo Membro
- Membro desde : 25/12/2012
Mensagens : 29
Pontos : 47 -
Re: Não repetir a imagem
por Roevs 30.01.13 13:25
Olá,
Tente este
Até
Tente este
Vermelho: Altere ate que fique como desejabody {
background-repeat: no-repeat!important;
position: absolut!important;
left: 125px!important;
top: 125px;!important
}
Até
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Re: Não repetir a imagem
por Slash! 30.01.13 13:37
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:
Haverá alguma outra solução? D:
Slash!- Novo Membro
- Membro desde : 25/12/2012
Mensagens : 29
Pontos : 47 -
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Re: Não repetir a imagem
por Slash! 30.01.13 13:56
Bem, aqui o código HTML cru sem os códigos que você mandou eu colocar.
Bom proveito. x)
#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.
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.
Slash!- Novo Membro
- Membro desde : 25/12/2012
Mensagens : 29
Pontos : 47 -
Re: Não repetir a imagem
por Roevs 30.01.13 14:37
Olá,
Tente troca por este
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
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
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Re: Não repetir a imagem
por Slash! 30.01.13 14:43
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. 
Slash!- Novo Membro
- Membro desde : 25/12/2012
Mensagens : 29
Pontos : 47 -
Re: Não repetir a imagem
por VitorChaves 01.02.13 2:21
Olá amigo, veja se resolve seu problema:
Melhores Cumprimentos,
Vítor Chaves.
- Código:
.body{
background-position:center center;
position:absolute;
}
Melhores Cumprimentos,
Vítor Chaves.
VitorChaves- Novo Membro
- Membro desde : 31/12/2012
Mensagens : 19
Pontos : 32 -
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos