Foros del Web » Creando para Internet » CSS »

Fondo fijo que se muestre desde abajo a la izquierda

 Estas en el tema de Fondo fijo que se muestre desde abajo a la izquierda en el foro de CSS en Foros del Web. Gente... a ver si me pueden ayudar... vieron que la gente inexperta pregunta tonterias, y bueno.. ahi vamos con una... yo tengo la siguiente imagen ...
  #1 (permalink)  
Antiguo 16/10/2008, 17:45
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 21 años, 8 meses
Puntos: 4
Fondo fijo que se muestre desde abajo a la izquierda
Gente... a ver si me pueden ayudar... vieron que la gente inexperta pregunta tonterias, y bueno.. ahi vamos con una...

yo tengo la siguiente imagen para poner de backgraund de mi web...



teniendo en cuenta que la parte importante de la imagen es la gris, y lo celeste puede es lo que peude sobrar o no segun las distintas resoluciones de pantalla...

lo que necesito yo en principio es que el fondo quede fijo, o sea, o sea, cuando haya que scrolear para abajo el findo quede fijo...

y lo mas dificil es el fondo arranque a msotrarce desde abajo a la izquierda para el resto de la pagina.. no se si se entiende... lo he visto enn algunos sitios..

si me peude ayduar se los agradeceria...

saludos

leo
__________________
que fea firma que tenia... prefiero tener esto
  #2 (permalink)  
Antiguo 16/10/2008, 18:10
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 16 años, 1 mes
Puntos: 40
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
hola:

mira si te entiendo bien, el div de color gris tiene que ser position:fixed y el lugar donde va a aparecer lo controlas con padding o margin.

ahora hay un problema, el ie6 y anteriores no soporta position:fixed, ahi tienes que usar algo de javascript,necesitaras un script que se llama fixed.js y lo linkeas y con eso basta.

avisas si te va bien o si tienes otra duda.

chau
  #3 (permalink)  
Antiguo 16/10/2008, 18:30
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
Cita:
Iniciado por willyfc Ver Mensaje
mira si te entiendo bien, el div de color gris tiene que ser position:fixed y el lugar donde va a aparecer lo controlas con padding o margin.
ahora hay un problema, el ie6 y anteriores no soporta position:fixed, ahi tienes que usar algo de javascript,necesitaras un script que se llama fixed.js y lo linkeas y con eso basta.


Creo que hay algo mucho más sencillo con CSS. Mejor te pongo el ejemplo para que lo veas. Imagina que esa imagen que pongo de fondo es tu imagen completa:

http://www.araudi.net/forosdelweb/fondo_fijo.html
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 16/10/2008, 19:21
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 20 años, 1 mes
Puntos: 10
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
Mikmoro, el ejemplo que has puesto es buenísimo.

Muchas gracias. Voy a estudiarlo porque me despierta curiosidad el buen funcionamiento que tiene en ie6.

Saludos
  #5 (permalink)  
Antiguo 16/10/2008, 20:36
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 20 años, 1 mes
Puntos: 10
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
Ya que el fijado que propone Mikmoro es una utilización (estupenda por otra parte) de una imagen de fondo fija, se podría completar, dándole una vuelta de tuerca al css, lo que permitiría tener un nuevo fondo general para la página (back.jpg) o, si se quiere, un color, p.e. background-color: #FFFFCC, sin perjudicar a la imagen de posición fija inicial:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0049)http://www.araudi.net/forosdelweb/fondo_fijo.html -->
<HTML lang=es-es xml:lang="es" 
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Posicion fija para IE6 (fixed) - Recursos CSS - araudi.net</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="recursos, css, diseño web, xhtml, software libre" name=keywords>
<META content="Pagina dedicada a recursos de diseño web con CSS, en castellano" 
name=description>
<META content="Mikel Morote Donazar - Praxis Iruñea SLL" name=Author>
<META content="Recursos CSS" name=Subject>
<META content=español name=Language>
<META content="index, follow" name=Robots><LINK lang=es 
title="Indice de contenidos" media=all href="http://www.araudi.net/indice.html" 
rel=alternate>
<STYLE type=text/css> 
html, body {
	width: 100%; 
	height: 100%;
	overflow: hidden;	
	margin: 0; 
	padding: 0;
}
#contenido {
	position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; overflow: auto;
}
#fijo {
	width: 100%; 
	height: 100%; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	z-index: 0; 
	overflow: hidden; 
	background-image: url('bloque.png'); 
	background-repeat: no-repeat; 
	background-position: left bottom;
}
#fondo {
	position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 100%; 
	height: 100%; 
	z-index: -1; 
	background-color: #00FFFF; 
	background-image: url('back.jpg')
}		
</STYLE>

<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY>
<div id="fondo"></div>
<div id="fijo"></div>
<DIV id=contenido>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P>
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto 
texto texto</P></DIV>
</BODY></HTML>
Al probar meter en la misma carpeta una imagen para el fondo (back.jpg) y la imagen estática (bloque.png).

El efecto es muy bueno.

Funciona en ie6, ie7, firefox, opera, chrome

Saludos
Última edición por ssclamp; 16/10/2008 a las 20:39 Razón: Test en browsers
  #6 (permalink)  
Antiguo 16/10/2008, 21:47
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 21 años, 8 meses
Puntos: 4
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
che.. esto es de no creer.. es exactamente lo que necesitaba... perdon si no fui claro.. pero a buen entendedor pocas plabras... jaja buenisimo como me entendieron.. necesitaba esto.. los quiero chicos.......
__________________
que fea firma que tenia... prefiero tener esto
  #7 (permalink)  
Antiguo 16/10/2008, 23:23
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 21 años, 8 meses
Puntos: 4
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
Gente.. les cuento que de cabeza dura me puse a probar ahora a la noche... lamentablemente mañana madrugo y como..... pero bueno.. es un vicio tratar de aprender y superarme dia a dia, y espero que ustedes, se sientan orgullosos de enseñar, o no se como decirlo, facilitar el aprendisaje de otra gente..

asique bueno, como no me quedo con que la gente del foro trabaje para mi, sino que me enseñen... me puse a tocar y quedo esto...

esto era basicamente lo que queria lograr, obviamente le faltan ajustes... lo unico que hice fue agregar una div. llamada #info y tocar algun que otro parametro de lso estilos... y bueno quedo esto...

http://www.leonardobenz.com.ar/inmov...ijo/index.html

y bueno... tambien les dejo un comprimido que tiene tambien la imagen, para facilitar aun mas las cosas

http://www.leonardobenz.com.ar/inmov...fondo_fijo.rar

quedo un detalle que no lo pude corregir.. por ahi por inexperiencia obvio.. pero bueno veamos a ver que se puede hacer...

si lo ven por ahi a simple vista.. se ve en todos los navegadores iguales, pero si se fijan en la div info, el margen superior e inferior quedan de una forma iguales en firefox y chrome y de otra forma en IE6 y IE7.

en el primer caso, queda como un margen de 15 px arriba y abajo y en el segundo un 0 rotundo.

pero igual. no es nada que me quite el sueño.. por hoy estoy mas que satisfecho.. asique bueno. les estoy sumamente agradecido... y les digo que peuden contar conmigo para lo que necesiten.. mi rama es mas la del diseño.. asique si necesitan opiniones o ayuda con algo.. aca estoy...

y perdon por ser reiterativo, pero gracias, la ayuda estuvo de puta madre...

saludos

Leo
__________________
que fea firma que tenia... prefiero tener esto
  #8 (permalink)  
Antiguo 17/10/2008, 09:29
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 20 años, 1 mes
Puntos: 10
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
Me alegro que te haya servido. Queda bonita tu propuesta de página.

Lo que ocurre es que IE interpreta el padding de una forma diferente y por eso te queda el texto más subido que en los otros browsers.

Lo puedes arreglar añadiendo lo siguiente debajo del estilo:

<!--[if IE]>
<STYLE type=text/css>
#info {
padding: 20px 20px 0px 20px;
}
</STYLE>
<![endif]-->

Saludos
  #9 (permalink)  
Antiguo 17/10/2008, 09:51
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
Creo que es más sencillo que eso: se trata del margen de los párrafos, ya que el asignado por defecto en IE y en FF es diferente, y como no le estás asignando ninguno, los interpreta con sus valores por defecto.

Añade esto a la css:

#info p {margin: 10px;}

No obstante, es recomendable eliminar los margin y paddin que tengan por defecto muchos de los elementos, por lo que es buena práctica empezar tu hoja de estilo con esto:

* {margin: 0; padding: 0;}

Luego ya vas asignando los valores que te interesen a cada elemento.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 17/10/2008, 17:18
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 20 años, 1 mes
Puntos: 10
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
Mikel, no cabe duda que resetear con * {margin: 0; padding: 0;} es una buena idea.

Gracias

Saludos
  #11 (permalink)  
Antiguo 18/10/2008, 16:17
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 21 años, 8 meses
Puntos: 4
Respuesta: Fondo fijo que se muestre desde abajo a la izquierda
es bueno el aporte... ja.. eso de resetar jamas se me hubiese ocurrido, solo lo hago con img {border: none}, para no tener que nadar metiendole propiedades a cada imagen con link
__________________
que fea firma que tenia... prefiero tener esto
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:41.