• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

fil79

background

29 mensagens neste tópico

Boas

é possivel ter mais do que uma imagem de background???desde já agradeço

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não. Pelo menos usando métodos "convencionais".

O que podes fazer (não sei se te irá solucionar o problema), é ter vários elementos, uns em cima dos outros (usando a propriedade CSS z-index, por exemplo), e colocar um background para cada um deles. Suponho que assim é capaz de dar para simular o efeito pretendido. Se bem que deve ser uma confusão de código.

EDIT: pequeno erro de escrita.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pois em principio não pois a ideia é esta..tenho uma imagem que vai servir para background que para ter uma boa definição acaba por ficar pesada, portanto demora a carregar...a imagem apesar de não ser uniforme tem partes que são iguais(3 neste caso), portanto a minha ideia  era criar 3 fundos com uma pequena amostra de cada parte de modo a que as imagens  repetissem e completassem por fim o background na sua totalidade...não  dá para fazer com frames??espero que me tenha feito entender..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

basicamente precisava de saber como posso dar um background ás divs...tenho o seguinte código

<style type="text/css">
<!--
body {
background-image: url("back1.jpg");
background-repeat: repeat;
}
.novo {

background-image: url("ponto.jpg");
background-repeat: repeat-y;
background-position: 200px 0px; 
}
-->
</style>

e em html:

<div id="body"><div class="novo"></div>

basicamente esta div é uma pequena imagem que se repete na vertical e se vai sobrepor o background, mas não está a dar...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

o body que tens definido no css é o do html (o que vem depois do head) e não uma div...

se tiveres o fireworks, por exemplo, abre a imagem que tens queres colocar como background e, através do optimization, tenta ver qual o melhor formato e resolução para o menor tamanho...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

sim a imagem já tenho optimizada, mas agora como a conjugo como background juntamente com a outra img de back jaá existente??

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

e já agora como faço para uma imagem estar transparente no fireworks, de maneira que não apareca um fundo branco mas sim o background, já tentei com new document->transparent-> e gravei com o formato png...mas mesmo assim aparece um fundo branco...não era suposto o formato png permitir imagens transparentes??

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

o png trabalha com transparências, o ie até à versão 6 é que não... só agora na 7 é que "parece" que já faz a transparência...

para ficar com a transparência em trodos os browsers, tens de exportar como gif com a transparência no alpha chanel...

quanto à conjugação das duas imagens, é uma coisa dificil de conjugar... o 1º problema passa pela resolução em que o user visualiza a página... ou tens a página alinhada à esquerda e topo ou, se estiver centrada na página, fica dificil fazer os acertos por causa das várias resoluçóes... mais logo eu vou tentar uma coisa para ver se funciona sem ter de detectar qual o tamanho a que a página está e depois digo se resulta ou não :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

o problema é que o gif perde muita qualidade, era mesmo porreiro conseguir em png!!de qq modo obrigadão:)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

só fiquei com uma dúvida...onde aplico aquele script principal(o maior)...na página onde está a imagem??

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

eu fiquei com dúvidas porque descobri um bug-fixer para o IE>6 em javascript  que é carregado externamente aqui vai:

/*esta parte colocas no <head>*/<script defer type="text/javascript" src="pngfix.js"></script>


/*esta fica no pngfix.js*/

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

este script funciona, mas demora muito tempo a carregar, o tua sugestão é melhor :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

bem resulta mas aconteceu outra situação bizarra...assim funciona na boa no IE mas não funciona no Firefox :wallbash:...mas vou dar-lhe com um script php para resolver a situação...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

lol usar php para quê? :)

usa este "picado" de JavaScript (deve funcar):

if (browser.isIE) {
     // código do hack
}

:P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

acontece que experimentei o tal behavior para conseguir ver png transparentes...ao testar no meu servidor deu na boa mas ao tranferir para o remoto já não está a funcionar...não entendo qual o problema....

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

esse behavior já tinha experimentado...funciona no meu servidor mas não funciona no remoto...para tal usei o seguinte cod:

<style type="text/css">

img {
   behavior: url("pngbehavior.htc");
}

</style>



<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
   if (!supported) return;

   var pName = event.propertyName;
   if (pName != "src") return;
   // if not set to blank
   if ( ! new RegExp(blankSrc).test(src))
      fixImage();
};

function fixImage() {
   // get src
   var src = element.src;

   // check for real change
   if (src == realSrc) {
      element.src = blankSrc;
      return;
   }

   if ( ! new RegExp(blankSrc).test(src)) {
      // backup old src
      realSrc = src;
   }

   // test for png
   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
      // set blank image
      element.src = blankSrc;
      // set filter
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                     src + "',sizingMethod='scale')";
   }
   else {
      // remove filter
      element.runtimeStyle.filter = "";
   }
}

</script>
</public:component>


</head>

<div id="imagem" style="position:absolute; left:235px; top:204px; width:401px; height:144px; z-index:2"><img src="blank.gif" style="width: 700px; height: 300px; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='titulo.png', sizingMethod='scale')" /></div>

devo estar a errar em algum sitio :wallbash:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

não....mas entretanto já consegui outro bug fixer....finalmente está a funcionar na perfeição...falta apenas uma maneira de juntar outras imagens que sejam carregadas juntamente com o background ...em tablas funcionaria mas depois com as ~diferents resoluções será complicado...aqui é que ainda estou com dúvidas

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pois esssa passou-me....  :-[: em relação ao meu problema das imagens por tles(repetidas) não sabes como posso fazer sem ser por tabelas....

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

bem, depois de algumas tentativas com o css, encontrei uma solução para a questão de teres a imagem de fundo do body sempre centrada, independentemente da resolução...

basta na parte do css referente ao body colocares:

margin: 0 50% 0 50%

assim, a imagem ficará sempre centrada, esteja o utilizador a ver a 800x600 ou a 1600x1200...

agora, é só arranjares maneira de o tamanho fisico da imagem ser leve o suficiente para carregar rápido...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora