Advertisement:

Author Topic: [Resolvido] Altura automatica do background  (Read 12369 times)

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
[Resolvido] Altura automatica do background
« on: October 20, 2011, 03:57:35 AM »
Boas,

Gostaria de saber como posso esticar a tela do fundo para ela preencher sempre o ecra (independente da resoluçao utilizada)?

Por agora tenho assim:

Theme/css/index
Code: [Select]
#bodybg {
background:  url(../images/theme/BackgroundDragoN.png) 0 0 repeat-x fixed;
padding-top: 30px;

Se possivel era arranjar maneira de esticar verticalmente e horizontalmente, assim a imagem seria smp igual em todos os ecras.


Cumpz.
« Last Edit: October 24, 2011, 03:54:41 PM by DragoN_SAMP »

Offline dihst

  • Semi-Newbie
  • *
  • Posts: 84
Re: Altura automatica do background
« Reply #1 on: October 20, 2011, 05:07:29 AM »
tenta colocar um

Code: [Select]
width: 100%;
após o pading-top, não sei se funciona.. pra largura...



pra comprimento normalmente é 'height'
mais não sei se faria efeito colocando ai tb um height: 100%;

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
Re: Altura automatica do background
« Reply #2 on: October 20, 2011, 08:42:40 AM »
Nao funcionou. Mas obrigado pela tentativa..   ;D

Agora, passei por isto:

http://css-tricks.com/3458-perfect-full-page-background-image/

Code: [Select]
html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Como posso integrar isto no meu tema? Que ficheiros preciso de editar (e onde) para conseguir este efeito?


Estou a usar o tema Backbox do Crip.

Offline dihst

  • Semi-Newbie
  • *
  • Posts: 84
Re: Altura automatica do background
« Reply #3 on: October 20, 2011, 09:39:10 AM »
Tenta substituir o 'html' do código que vc colocou por '#bodybg' e coloca no lugar do 'bodybg' do index.css

é que to sem smf aqui agora, mais no final da tarde instalo aqui um para ver direitinho para vc..

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
Re: Altura automatica do background
« Reply #4 on: October 20, 2011, 09:53:23 AM »
Penso que não vai dar pois o "background-size" não é reconhecido no meu Index actual..

Fico muito grato pela sua ajuda. Esperarei então pela sua resposta. Se precisar de alguma informação extra aponte aqui que tratarei de a recolher o mais rápido possível.

Offline Spectrum..!!

  • SMF Hero
  • ******
  • Posts: 5,567
  • Gender: Male
  • No to Bullying !!
Re: Altura automatica do background
« Reply #5 on: October 20, 2011, 10:28:34 AM »
O amigo não estaria procurando por isto, estaria?

http://www.simplemachines.org/community/index.php?topic=387374.0

Existem pessoas que deixam de buscar algo que dura a vida toda, para somente conquistar algo que dura alguns momentos...
Ser humilde; não é ser menos que alguém. É saber que não somos mais que ninguém!
SMF 2.0.4 | Meu site -->
Dell Vostro 3560 + AMD Radeon™ HD 7670M 1GB| Windows 8 Pro | Fedora 18 | IE10 | Google Chrome
Não atendo PM para pedidos de suporte/ajuda

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
Re: Altura automatica do background
« Reply #6 on: October 20, 2011, 11:09:20 AM »
Não Spectrum, o forum esta do jeito que eu quero. Apenas quero defenir a imagem do fundo (background) para ficar a ocupar o tamanho do ecra (seja num ecra de 800x600 ou num 1366x768, apenas exemplos).


Deu para entender..?

Offline Spectrum..!!

  • SMF Hero
  • ******
  • Posts: 5,567
  • Gender: Male
  • No to Bullying !!
Re: Altura automatica do background
« Reply #7 on: October 20, 2011, 12:30:56 PM »
Sim, compreendi. Mas realizando as alterações não faz efeito também para a imagem de fundo? Tipo, no lugar de colocar o tamanho do fórum em px, colocar em % ?

Existem pessoas que deixam de buscar algo que dura a vida toda, para somente conquistar algo que dura alguns momentos...
Ser humilde; não é ser menos que alguém. É saber que não somos mais que ninguém!
SMF 2.0.4 | Meu site -->
Dell Vostro 3560 + AMD Radeon™ HD 7670M 1GB| Windows 8 Pro | Fedora 18 | IE10 | Google Chrome
Não atendo PM para pedidos de suporte/ajuda

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
Re: Altura automatica do background
« Reply #8 on: October 20, 2011, 12:38:21 PM »
Mas o with é a largura, ne? E eu tou pedido para a altura.

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Altura automatica do background
« Reply #9 on: October 20, 2011, 02:26:03 PM »
A altura da imagem muda relativamente a largura, caso contrário sua imagem vai ficar esticada verticalmente...
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
Re: Altura automatica do background
« Reply #10 on: October 20, 2011, 02:39:58 PM »
Preferia que ficasse um pouco esticada do que ficar cortada..

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Altura automatica do background
« Reply #11 on: October 20, 2011, 04:51:20 PM »
Se estiver cortando então coloque o comando height: 100% também..
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
Re: Altura automatica do background
« Reply #12 on: October 20, 2011, 04:58:24 PM »
Não funciona..

Code: [Select]
#bodybg {
background: url(../images/theme/BackgroundDragoN.png) 0 0 repeat-x fixed;
padding-top: 30px;
height: 100%;
}

Se brincar com [control+mouse scrool] a imagem se redimensiona.


Ve este exemplo:  http://ringvemedia.com/

Se mexeres com o control+scrool notas que a imagem fica sempre igual.

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Altura automatica do background
« Reply #13 on: October 20, 2011, 10:22:06 PM »
Não era bem isso que era pra tu fazer, veja esse tuto para entender melhor: http://10calco.blogspot.com/2010/07/redimensionar-imagem-com-css-background.html
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
Re: Altura automatica do background
« Reply #14 on: October 21, 2011, 12:44:06 PM »
Ogb pela sua paciencia.. Sei que é muito chato quando as pessoas tentam ajudar e os noobs nao enxergam, mas eu nao entendo mesmo disto..

Coloquei do jeito que la esta, apenas alterando o #div para #bodybg. Mas no script ha linhas k nao sao detectadas correctamente (nao ficam azuis), veja a pic.


Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Altura automatica do background
« Reply #15 on: October 22, 2011, 11:26:53 PM »
anexe o arquivo de estilo do seu theme para darmos uma olhada no que pode estar ocasionando isso..
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
Re: Altura automatica do background
« Reply #16 on: October 23, 2011, 04:07:20 PM »
Bem, aqui um amigo no SMF me presentiou com a soluçao. Passa pelo uso de um filescript mas de quizerem posso colocar aqui a soluçao.

Vou esperar pela vossa resposta e depois dou o assunto como solucionado.

Obrigado a todos pela atenção que tiveram.   ;)

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Altura automatica do background
« Reply #17 on: October 23, 2011, 09:45:25 PM »
Então diga qual foi a solução...
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline DragoN_PT

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Male
Re: Altura automatica do background
« Reply #18 on: October 24, 2011, 03:53:36 PM »
Ok. Primeiro tenham em atenção que estou a usar um tema diferente do default, mais concretamente o BlackBox by Crip. Posto isto, não sei se será igual para todos os outros temas.

Vamos aos codigos:

No "Index.template.php":

Encontrar:
Code: [Select]
// Here comes the JavaScript bits!
echo '
Colocar depois:
Code: [Select]
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script>
<script language="JavaScript" type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.ez-bg-resize.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
$("body").ezBgResize({
img     : "', $settings['theme_url'], '/images/theme/OTEUBACKGROUNDAQUI.jpg",
});
});
</script>
Nota: Onde diz "OTEUBACKGROUNDAQUI" é o local onde devem escolher o caminho para a vossa imagem. Ou então usar o mesmo caminho só alterando essa linha para o nome da vossa imagem.


No "index.css"

Encontrar:
Code: [Select]
body
{
font: 78%/130% verdana, Helvetica, sans-serif;
background: #131313;
margin: 0;
padding: 0;
}
Substituir por:
Code: [Select]
body
{
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

Encontrar:
Code: [Select]
div#wrapper
{
width: 960px;
margin: 0 auto;
padding: 0;
}
Substituir por:
Code: [Select]
div#wrapper
{
width: 960px;
margin: 80px auto;
padding: 0;
}

Colocar "jquery.ez-bg-resize" na pasta (...)\themes\Blackbox\scripts\   
(o ficheiro segue em anexo)


E pronto. E assim o background ficou do jeito que eu queria.


Agradeço ao Grosraisin por toda a ajuda prestada.