Foros del Web » Creando para Internet » CSS »

div con background animado que no muestre scroll

Estas en el tema de div con background animado que no muestre scroll en el foro de CSS en Foros del Web. Estoy trabajando con un div que se encuentra justo encima del body y tiene un background animado, el problema es que utilizo una imagen que ...
  #1 (permalink)  
Antiguo 20/04/2012, 16:14
 
Fecha de Ingreso: abril-2012
Mensajes: 8
Antigüedad: 10 años, 2 meses
Puntos: 0
div con background animado que no muestre scroll

Estoy trabajando con un div que se encuentra justo encima del body y tiene un background animado, el problema es que utilizo una imagen que tiene w=2000px y h=2000px, dado que es requerido, y debido a esto la pantalla completa me sale con scroll y no quiero eso, sólo quiero que muestre lo que se alcance a ver en la pantalla sin este scroll. No puedo usar overflow: hidden; en el body porque en otras páginas si lo requiero y quise hacerlo en el css del div, pero no funciona. Este es el css del div en cuestión:

.fog
{
position:absolute;
top: 50%;
left: 50%;
width: 2000px;
height: 2000px;
margin-top: -1000px;
margin-left: -1000px;
opacity: .5;
background: url('/Styles/Images/fog.png') repeat-x 0 center;

-webkit-animation-name: circulos;
-webkit-animation-duration: 120s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

}

@-webkit-keyframes circulos {
from {
-webkit-transform: rotate(0deg);
background-position: 0 center;
}
to {
-webkit-transform: rotate(360deg);
background-position: 1000px center;
}
}

Estoy atento a las sugerencias...
  #2 (permalink)  
Antiguo 20/04/2012, 16:55
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 14 años, 3 meses
Puntos: 1146
Respuesta: div con background animado que no muestre scroll

prueba con
Código CSS:
Ver original
  1. .fog
  2. {
  3. width:100%;
  4. height:100%;
  5. opacity: .5;
  6. background: url('/Styles/Images/fog.png') repeat-x center center;
  7.  
  8. -webkit-animation-name: circulos;
  9. -webkit-animation-duration: 120s;
  10. -webkit-animation-iteration-count: infinite;
  11. -webkit-animation-timing-function: linear;
  12. }
  #3 (permalink)  
Antiguo 20/04/2012, 17:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años
Puntos: 539
Respuesta: div con background animado que no muestre scroll

¿2000x2000px para un efecto méramente ornamental?
Creo, y es sólo una sugerencia, que se evitaría 2 3 problemas (peso imagen + scroll + ralentizar el efecto) si utiliza una imagen más pequeña y la utiliza como fondo 100% (con cualquiera de las varias técnicas) en un div y no en el body.

Adenda:
La propiedad animation puede declararse de forma acortada:
Código CSS:
Ver original
  1. animation: circulos 120s infinite linear;
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Etiquetas: css3, webkit
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:40.