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
#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.
tenta colocar um
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%;
Nao funcionou. Mas obrigado pela tentativa.. ;D
Agora, passei por isto:
http://css-tricks.com/3458-perfect-full-page-background-image/
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 (http://custom.simplemachines.org/themes/index.php?lemma=961) do Crip.
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..
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.
O amigo não estaria procurando por isto, estaria?
http://www.simplemachines.org/community/index.php?topic=387374.0
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..?
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 % ?
Mas o with é a largura, ne? E eu tou pedido para a altura.
A altura da imagem muda relativamente a largura, caso contrário sua imagem vai ficar esticada verticalmente...
Preferia que ficasse um pouco esticada do que ficar cortada..
Se estiver cortando então coloque o comando height: 100% também..
Não funciona..
#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.
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
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.
anexe o arquivo de estilo do seu theme para darmos uma olhada no que pode estar ocasionando isso..
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. ;)
Então diga qual foi a solução...
Ok. Primeiro tenham em atenção que estou a usar um tema diferente do default, mais concretamente o BlackBox by Crip (http://custom.simplemachines.org/themes/index.php?lemma=961). Posto isto, não sei se será igual para todos os outros temas.
Vamos aos codigos:
No "Index.template.php":
Encontrar:
// Here comes the JavaScript bits!
echo '
Colocar depois:
<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:
body
{
font: 78%/130% verdana, Helvetica, sans-serif;
background: #131313;
margin: 0;
padding: 0;
}
Substituir por:
body
{
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
Encontrar:
div#wrapper
{
width: 960px;
margin: 0 auto;
padding: 0;
}
Substituir por:
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 (http://www.simplemachines.org/community/index.php?action=profile;u=279863) por toda a ajuda prestada.