E aí pessoal hoje vou postar como colocar uma imagem de fundo no site de acordo com a resolução do monitor.
- Isso é muito útil quando o imagem de fundo precisa aparecer bem e ter um bom destaque.
- Sem esse método a foto de fundo ficaria cortada e fora do lugar que desejamos.
1 – Vamos lá, primeiro vamos criar as imagens que precisamos, no caso eu criei umas 10 imagens com as resoluções que eu precisava.
page_bg800.jpg, page_bg1024.jpg,…,page_bg1440.jpg,…,page_bg1680.jpg e assim por diante.
2 – Depois disso implementamos uma função JAVASCRIPT que coloca um estilo para o fundo (coloca o fundo propriamente dito). Segue abaixo a função que fica no index.php
/*Função que detecta a resolução de tela que você está usando e coloca o plano de fundo*/
function resolucao()
{
if (screen.width == “640”){
document.body.style.background=”#fafafa url(templates/mariabenta/images/page_bg800.jpg) no-repeat”;
}
if (screen.width == “800”){
document.body.style.background=”#fafafa url(templates/mariabenta/images/page_bg800.jpg) no-repeat”;
}
if (screen.width == “1152”){
document.body.style.background=”#fafafa url(templates/mariabenta/images/page_bg1152.jpg) no-repeat”;
}
if (screen.width == “1024”){
document.body.style.background=”#fafafa url(templates/mariabenta/images/page_bg1024.jpg) no-repeat”;
}
if (screen.width == “1280”){
document.body.style.background=”#fafafa url(templates/mariabenta/images/page_bg1280.jpg) no-repeat”;
}
if (screen.width == “1440”){
document.body.style.background=”#fafafa url(templates/mariabenta/images/page_bg1440.jpg) no-repeat”;
}
if (screen.width == “1680”){
document.body.style.background=”#fafafa url(templates/mariabenta/images/page_bg1600.jpg) no-repeat”;
/*Fim da Função que detecta a resolução de tela que você está usando e coloca o plano de fundo*/
3 – Depois disso vem o “pulo do gato” : adicionamos uma chamada para a função resolucao() no evento onload=”” do body do seu index.php:
<html>
<head></head>
<body id=”page_bg” onload = “resolucao()”>
</body>
</html>
4 – Se tiver alguns arquivo css associado ao seu documento lembre de remover a propriedade background do mesmo. No caso meu arquivo de css é o template.css e eu removi essa linha:
#page_bg {
remover –>[color=#FF0000]background: #fafafa url(../images/page_bg.jpg) no-repeat; [/color]
}
O resultado você confere aqui: http://www.mmariabenta.com.br
Altere sua resolução e ao carregar a página você verá que o background do site será recarregado dinamicamente de acordo com a mesma (resolução).
É isso aí pessoal! Abraço!
Olá Lucas, sou novato em HTML e estou criando o site do meu time de Futebol Americano, mas me deparei com esse problema o background, quero fazer exatamente o que teu post diz, mas não consegui aplicar corretamente o código, modifiquei ele de diversas maneiras(ele pode estar parecendo sem nexo agora :P) mas não consegui, estou postando aqui meu código, agradeceria muito se você pudesse corrigi-lo.
http://rapidshare.com/files/421580827/index.txt
PS: Mandei em txt pra n├úo parecer que ├® v├¡rus UEHuhUEHEuhE…
Testei de todas as maneiras e não consegui cara, tá difícil!
Obrigado!
Boa noite… s├│ consegui responder agora…. o arquivo est├í indispon├¡vel… me manda por email! Abra├ºo
Fala meu camarada, sano minha duvida aqui mais rapido do que nunca ! Brigadão mesmo!
abs
Lucas! Vc me salvou!! rsrsrs
Fui seguindo a orientação e deu td certo, sem nenhuma complicação! Só queria saber como faço para colocar o link na imagem.
Se puder me ajudar eu agradeço.
bjs