Css: Background por medida!
May 26
Internet, Work 100%, background 2 Comments
Ainda à uns dias atrás, um amigo meu perguntava-me qual seria a melhor maneira para colocar uma imagem no fundo do site dele que conseguisse acompanhar sempre a largura do browser. Hoje deparei-me com uma situação idêntica para um site aqui da CM-Sesimbra.
Quantos de nós é que já não se encontraram em situações identicas? Muitos. Infelizmente hoje em dia ainda não há browsers compatíveis com CSS 3, por isso, para conseguirmos obter o efeito desejado temos de recorrer a alguns truques para criar um falso background.
Tenho vindo a melhorar o código que uso para esta situação, ainda contem algumas falhas mas já é usavel.
Primeiro que tudo devemos colocar o margin e padding do body a 0:
body {
margin:0;
padding:0;
}
Depois disso criamos as propriedades css para a imagem que vamos usar, colocamos a largura e altura a 100%:
img#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
De seguida colocamos a imagem que vai ser usada como background logo a seguir à tag <body>:
<img src=”/images/default.jpg” alt=”background” id=”background”/>
Agora é só criarmos uma div onde vamos colocar todo o site:
<div id=”total”>Conteudo do Site</div
E não esquecer as propriedades CSS para o Div que criamos para o conteudo:
#total{
position:relative;
z-index:10;
}
Este código que uso pode gerar problemas no IE6, mas ando a trabalhar para resolver isso.
Qualquer duvida é só apitar.
No related posts.
May 28, 2009 @ 11:59:58
Nice.Mas…IE6? Isso tá morto, rapaz! Pessoalmente, já “reeduquei” a maioria (leia-se cerca de 90%) dos meus clientes para que usem outro browser, ou então que façam o upgrade para, pelo menos, o IE7
fica uma dica simpática e nada obtrusiva
[url]http://code.google.com/p/ie6-upgrade-warning/[/url]
Jun 03, 2009 @ 10:12:45
Infelizmente o IE 6 não esta morto, e ainda muita gente utiliza.
Não me lembro a percentagem de utilizadores de IE6 em Portugal, mas penso que era superior a 40%.