Ver Mensaje Individual
  #5 (permalink)  
Antiguo 16/10/2008, 20:36
ssclamp
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 19 años, 6 meses
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