ago
23
2009
23
2009
Redimensionar imagen de fondo [Elastico] con CSS
An article by 
Fondo elastico – Redimensionando Proporcional el background
Bueno… los que usan o usaron flash… para hacer sitio web… recordaran que se puede redimensionar el fondo de tu web… dependiendo la rasolucion (o tamaño de la ventana) sin que pierda calidad o se deforme, y bueno ahora intentaremos hacerlo con CSS.
el html no es mas que nuestra imagen que nos servira como background y el resto de nuestro sitio… en este caso aplique un div contenedor de mas para tener un scroll en la ventana…
pueden quitar la opacidad y listo… yo la use para que aprecien el fondo que mola jeje
HTML para redimensionar el fondo
<img src="bg.jpg" class="img_bg" alt="Fondito" /> <div class="all"> <div class="cont">nuestro contenido </div> </div>
y nuestro CSS para redimensionar el fondo
* {margin:0;padding:0;position:relative;} html, body{width:100%;height:100%;overflow:hidden;} .img_bg{width:100%;height:100%;position:absolute;z-index:1;} .all{width:100%;height:100%;overflow:auto;left:0;opacity:0.7;top:0;z-index:2;} .cont{background:#FFF;-moz-opacity:0.7;filter:alpha(opacity=70); width:80%; margin:0 auto;}
Presionen ctrl+scroll(mouse) hacia atras y adelante en FF obien cambien de tamaño su ventana del explorador para que vean el efecto.
10 Comments + Add Comment
Leave a comment
Patrocinador
Siguenos
Suscribete
Correo @zoneartcss.com
Comentarios
- juan manuel en Subdominios con php y .htaccess
- PCHART-Crear gráficas en PHP | Espacio de *M@?!*[lOs KeRoS mUcHo a ToDoS...] en Pchart – Crear gráficas en PHP
- EH en Evitar resize de un textarea con CSS
- KAREN en Envia mensajes de texto gratis a celulares telcel
- Elie Cottage en Ventajas y desventajas de tener un blog gratis
viejo migue otra vez yo por aca molestandote pero necesito ayuda en el tema de elasticidad, hice una pagina html en web page maker y resulta que al 100% de pantalla se ve perfecto pero al poner la pantalla al 75% empieza a descudrarse toda quisiera ponerle el mismo sistema que me enseñaste de elasticidad en flash, pero este caso es html, por favor ayudame en este tema, que debo hacer en cada pagina con el codigo o si quieres te envio el codigo del index y lo aplico a todas las paginas te agradezco la atencion a la presente un gran abrazo
Bernie
ya te respondi man, saludos.
listo migue ya te escribi desde mi correo personal es un gmail
bcampilloblanco@gmail.com
Gracias mi hermano
este es mi correo info@zoneartcss.com
no me djea pegar el codigo sera que me das un correo a donde enviartelo y poder hacerlo te agradezco la atencion
Bernie.
segunda parte del codigo
<img border=0 src="images/wpmhome.gif" alt="Web Page Maker, create your own web pages."
este es el codigo html de mi pagina web
voodoo dolls studio
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: ‘Arial’;font-style: normal;font-weight: normal;color: #000000;text-decoration: none;}
div#container
{
position:relative;
width: 1260px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
body {text-align:center;margin:0}
<img border=0 src="images/wpmhome.gif" alt="Web Page Maker, create your own web pages."
no entiendo mucho el tema sera que te puedo enviar el codigo html de mi index y me explicas con ese ejmplo te lo agradeceria inmensamente una gran abrazo
Bernie.
HOla amigo si lo que quieres es que tu flash este ajustado a tu pantalla solo tienes uqe poner el alto y el ancho en 100%. recuerda si un div lo contiene de igual manera debe de estar. saludos
hola como estas necesito ayuda urgente en cuanto el redimensionamiento de mi pagina o su elasticidad pues tengo un monitor de 15 y se ve super pero al verlo en otro monitor de 17 o de 21 me quedan espacios al rededor blanco quisiera saber como puedo solucionar el tema con los codigos que me dices de html ( es una pelicula en flash pero el index en internet es html) como aplico, donde y que cambio al codigo te agradezco la atencio a la presente un gran abrazo
Bernardo campillo.