News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[Resolvido] Altura automatica do background

Started by DragoN_PT, October 20, 2011, 03:57:35 AM

Previous topic - Next topic

DragoN_PT

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.

dihst

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%;

DragoN_PT

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 do Crip.

dihst

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..

DragoN_PT

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.

Spectrum..!!


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

DragoN_PT

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..?

Spectrum..!!

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

DragoN_PT

Mas o with é a largura, ne? E eu tou pedido para a altura.

TaijovuNeji

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!!!

DragoN_PT

Preferia que ficasse um pouco esticada do que ficar cortada..

TaijovuNeji

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!!!

DragoN_PT

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.

TaijovuNeji

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!!!

DragoN_PT

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.


TaijovuNeji

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!!!

DragoN_PT

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.   ;)

TaijovuNeji

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!!!

DragoN_PT

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:
// 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 por toda a ajuda prestada.

Advertisement: