Ir para conteúdo

POWERED BY:

Arquivado

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

Eduardo Giullyanny

background 100%

Por , em Desenvolvimento frontend

Recommended Posts

Eduardo Giullyanny    1

Eduardo Giullyanny
Postado

Bom dia amigos...

 

 

Estou com um boro aqui, precisava colocar um background em minha aplicação, mas como ela eh uma imagem eu usei o seguite codigo.:

background:url(../@img/fundo.jpg) fixed no-repeat; background-size:100% 100%; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; -khtml-background-size: 100% 100%; -moz-background-size: 100% 100%;

em todos os browser atuais como.: firefox e safari. Todos esses funcionam, mas IE q testei num funciona... como eu poderia fazer para que ele funciona-se... ie8 e ie6 foram testados

 

 

agradeço desde já galela...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaue Machado    0

Kaue Machado
Postado

background-size é uma propriedade CSS3, e como todos sabemos, IE é alérgico à CSS... Talvez talvez o IE ainda não tenha compatibilidade com essa propriedade... Tinha outro jeito de "esticar" o bg, mas agora não lembro bem. Estou dando uma saída agora, então não tenho tempo, quando voltar, se ninguém tiver te ajudado eu posto aqui o outro jeito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Raphael    0

Paulo Raphael
Postado

Boa tarde Eduardo!

 

Bom, sou novo no Fórum desculpe se estiver fazendo algo de errado :D

 

Eu estava com o mesmo problema! A solução foi usar um script em Java e jQuery.

 

Olha esse link :

 

Clique aqui

 

Aqui tem tutoriais que ensinam varias formas de resolver esse problema, no meu caso

a que foi melhor foi a utilizando JavaScript e jQuery.

 

Espero ter ajudado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Raphael    0

Paulo Raphael
Postado

Bom a parte em JavaScript vai entre a TAC <HEAD>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="estilo/estilo.css" type="text/css" rel="stylesheet">
<title>Leo Sousa</title>


   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
	$(function() {   

		var theWindow        = $(window),
		    $bg              = $("#bg"),
		    aspectRatio      = $bg.width() / $bg.height();

		function resizeBg() {

			if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
			    $bg
			    	.removeClass()
			    	.addClass('bgheight');
			} else {
			    $bg
			    	.removeClass()
			    	.addClass('bgwidth');
			}

		}

		theWindow.resize(function() {
			resizeBg();
		}).trigger("resize");

	});
</script>



</head>

<body onkeydown="return false">

<img src="../imagens/fundo.jpg" id="bg" alt=""><!--Aqui é a imagem de fundo -->

<div id="topo"><img src="imagens/pronto.jpg" width="100%" height="111" /></div>

<div id="fundo"><div id="faixa"><img src="imagens/barra_2.png" width="100%" height="23" /></div><br />...

 

A parte do CSS você coloca na folha de estilo

 

* { margin: 0; padding: 0; }

	#bg { position: fixed; top: 0; left: 0; }
	.bgwidth { width: 100%; }
	.bgheight { height: 100%; }

	#corpo { 
	position: relative; 
	width: 910px; 
	height:550px; 
	margin: 0 auto; 
	padding: 0; 

	}

 

A div corpo é onde esta todo seu conteúdo.

 

Observação: todas as div's têm que ter um position: relative;

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