Fondo arenas movedizas

manuxdjent · #1 (**permalink**) 04/11/2012, 08:15

Buenos días , ¿alguien sabe porque cuando le aplico una transicion CSS3 a mi menú o a lo que sea, el fondo hace una cosa rara? , es como si se redimensionara o algo así raro y lo hace solo en la parte donde está la transición de opacidad , tengo puesto para que vaya de menos opaco a mas y me hace esa cosa rara, tengo el fondo en background-size: 100% , se adapta a la ventana, lo he probado sin el size al 100% quitando la propiedad y ya no me hace ese efecto raro , pero no me conviene ya que yo quiero que el fondo se adapte al 100% pero que no le pase esa cosa. Si alguien me puede ayudar , le estaría muy agradecido, un saludo a todos.

C2am · #2 (**permalink**) 04/11/2012, 13:43

El código que usas vale más que un millón de palabras.
Muestra el código que estas usando, o un enlace para ver de que hablas.

Saludos

manuxdjent · #3 (**permalink**) 04/11/2012, 14:08

Código:

<HTML>
<HEAD>
<LINK rel="stylesheet" href="orbit-1.2.3.css">
<LINK rel="stylesheet" href="demo-style.css">
<SCRIPT type="text/javascript" src="jquery-1.5.1.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.orbit-1.2.3.min.js"></SCRIPT>
<SCRIPT type="text/javascript">
			$(window).load(function() {
				$('#featured').orbit();
			});
</SCRIPT>
<STYLE type="text/css">



body{ 
margin:0;
padding:0;
background-position:center center;
background-color: black;
background-image:url(fondo.png);
background-repeat: no-repeat;
-webkit-background-size:100%;
-moz-background-size:100%;
height: 100%;


} 
#button{
padding:0;
text-align: left;
}
#button li{
display:inline;

}
#button li a{
font-size: 20px;
padding: 20px; 
padding-left:22px;
background: rgba(0, 0, 0, 0.2);
color: #FFF;
text-decoration: none; 
float:left;

}
#contenedor{
margin:0 auto;
width:950px;
vertical-align:top;
height-size:100%;
background: rgba(0, 0, 0, 0.2);


}

#icons{
margin:0 auto;
width:950px;
}
#fecha{

margin-left:4.5%;
}
#espacio{
height:2%;
width:950px;
background: rgba(0, 0, 0, 0.0);
}
#menu{
margin:auto;
width:950px;
text-align:center;
}

#button li a:hover {  
background-color: #2586d7;   
 
}  
</STYLE>
</HEAD>
<BODY>
<DIV id="menu">
	<UL id="button">
		<LI><A href="#">INICIO</A></LI>
		<LI><A href="#">NOTICIAS</A></LI>
		<LI><A href="#">TRABAJOS</A></LI>
		<LI><A href="#">VIDEOS</A></LI>
		<LI><A href="#">BLOG</A></LI>
		<LI><A href="#">EQUIPO</A></LI>
		<LI><A href="#">INFO</A></LI>
		<LI><A href="#">CONTACTO</A></LI>
	</UL>
</DIV>
<DIV id="icons">
<IMG src="icons.png"/>
</DIV>
<DIV id="contenedor">

<DIV class="container">
	<div id="featured">

			<a href=""><img src="slider.png" data-caption="#htmlCaption" /></a>
			<a href=""><img src="slider.png" /></a>


	</div>
</div>
<DIV id="espacio">
</DIV>
<DIV id="fecha">
<IMG src="marca.png"/>
</DIV>
</DIV>




</BODY>
</HTML>

Ahí no esta el código para el CSS3 , para las transiciones , pero vamos que no esta mal lo que estaba poniendo.