Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rudi Eriel

Problemas com backgrounds múltiplos

Por , em Desenvolvimento frontend

Recommended Posts

Rudi Eriel    0

Rudi Eriel
Postado

Olá pessoal, gostaria de uma ajuda, por isso vim aqui.

 

Tenho um site que utilizo background múltiplos no body ex.:

 

body{ background:url("imagens/bg-site.png") no-repeat top, url("imagens/bg-meio.png") repeat center, url("imagens/bg-rodape.png") repeat-x bottom; }

 

O problema é a compatibilidade com o IE8 e inferiores, testei aqui com o IE9 e funcionou, mozilla, ópera e safari tbm funcionaram nas versões recentes.

 

Gostaria de uma luz para resolver esse problema, pois o cliente espera pelo site. E mais um detalhe, sou novato em CSS. Estou no meu primeiro mês como web designer.

 

Ele atualmente fica sem fundo, fica branco, só aparece o rodapé.

 

O site é esse:

http://postesalves.com.br/postesecologicos/index.html

 

Desde já grato.

 

Rudi Duarte

www.rudiduarte-3d.blogspot.com

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Cara, nesse caso nao tem oque fazer, o IE antes do 9 nao tem compatibilidade, por background multiplo ser propriedade css3, os seguintes navegadores não sao compativeis

 

IE < 9.0

Firefox < 3.6

Opera < 10

 

Mas nao entendi porque voce quer usar background multiplo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Quebre a declaração em duas:

background: url(...);
background: url(...), url(...);

 

Informe o plano de fundo mais importante primeiro, o IE8 vai ignorar a sintaxe CSS3 mostrando pelo menos um BG.

 

Avise ao cliente que essa porcaria de navegador não dá suporte, ou recorra aos gatos.

 

<!--[if lt IE 9]><div id="bg1"></div><![endif]-->

#bg1 { background: url(...); bottom: 0; left: 0; position: fixed; top: 0; z-index: -1; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mateus Avila Isidoro    8

Mateus Avila Isidoro
Postado

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

 

Ele faz com que o nove tenha suporte a background múltiplo. Eric Meyer usou elementos b (aquele de negrito) com classes e posicionamento absoluto, display:block e z-index de 1, para ser visível atrás do texto. Mas é muito trabalho para fazer esse efeito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diegus Miestro    21

Diegus Miestro
Postado

Ao invés de usar backgrounds múltiplos não poderia ser um único background que ocupa todo o fundo independente da resolução?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rudi Eriel    0

Rudi Eriel
Postado

Ae galera, vlw pela ajuda, sobre usar um unico background, não poderia, pq quero deixar o meio em height auto (flexível), caso tenha que colocar mais conteúdo. As dicas anteriores não deram certo no IE7 e anteriores. Agora estou fazendo um outro site e fiz o seguinte:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Metal Sinter</title>
<link rel="stylesheet" type="text/css" media="all" href="estilo.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css">
</head>

<body>

<!-------------------------------------------------
-------------Site dividido em 3 partes-------------
---------------------parte 1----------------------->


<div id="superior"><!--inicio da tela superior-->

<div id="topo"><!--inicio do topo-->

<div id="nav"><!--inicio da navegação-->

<a href="index.html"><img src="imagens/logo.png" onMouseOver="this.src='imagens/logo-hover.png'" onMouseOut="this.src='imagens/logo.png'" width="400" height="80" /></a><!---logo da empresa-->

<nav id="menu"><!--inicio do menu-->

<ul><!--inicio dos itens do menu-->

<li><a href="index.html">Home</a></li>

<li><a href="empresa.html">Empresa</a></li>

<li><a href="produtos.html">Produtos</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="representantes.html">Representantes</a></li>

<li><a href="contato.html">Contato</a></li>

</ul><!--fim dos itens do menu-->

</nav><!--fim do menu-->

</div><!--fim da navegação-->

</div><!--fim do topo-->

</div><!--fim da tela superior-->


<!-------------------------------------------------
-------------Site dividido em 3 partes-------------
---------------------parte 2----------------------->


<div id="central"><!--inicio da tela central-->

<div id="conteudo"><!--inicio do conteudo do site-->

<h1>Titulo</h1>
<h2>Subtitulo</h2>
<h3>Texto</h3>

</div><!--fim do conteudo do site-->

</div><!--fim da tela central-->


<!-------------------------------------------------
-------------Site dividido em 3 partes-------------
---------------------parte 3----------------------->


<div id="inferior"><!--inicio da tela indefior-->

<div id="rodape"><!--inicio do rodape-->


<!--------------------------------------------------------
-------------BANNER ROTATIVO SEPARADO DO SITE-------------
---------------------------------------------------------->


</div><!--fim do rodape-->

</div><!--fim da tela central-->

<div id="banner"><!--inicio do banner rotativo-->

<ul><!--inicio das fotos do banner-->

<li><a href="#">Foto 1</a></li>

</ul><!--fim das fotos do banner-->

</div><!--fim do banner rotativo-->


</body>
</html>

 

Agora acho que da certo, na DIV central fica o conteúdo, portanto ela é flexível, e todas as divs principais são 100% de largura com as respectivas div dentro, por exemplo.: na DIV superior (100%) fica a DIV topo com largura fixa e as demais dentro dela (logo, menu).Fica a dica pra quem tiver a mesma dúvida.

 

Muito obrigado pela ajuda de todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

 

Ele faz com que o nove tenha suporte a background múltiplo. Eric Meyer usou elementos b (aquele de negrito) com classes e posicionamento absoluto, display:block e z-index de 1, para ser visível atrás do texto. Mas é muito trabalho para fazer esse efeito.

 

A funcionalidade de múltiplos planos de fundo é nativa no IE9.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito