TRUCOS CSS CON IMAGENES Y BACKGROUNDS

Trucos con imagenes CSS

El codigo CSS para insertar
una imagen en una pagina
se expresa con la función:
URL(IMAGEN.JPG)
Si la imagen esta en una carpeta
url(carpeta/imagen.jpg)
Ejemplo:
<style>
background-image:
url(images/imagen.jpg);
</style>

Si la imagen esta en una carpeta
que esta dentro de otra la sintaxis es:
url(carpeta/carpeta/imagen.png)
Ejemplo:
<style>
background-image:
url(carpeta/carpeta/imagen.jpg);
</style>
Si la PAGINA.HTM esta dentro
de una carpeta y la imagen esta
fuera de la carpeta la sintaxis es:
<style>
url(../images/imagen.jpg);
</style>

Sintaxis de como poner una
imagen como fondo de una pagina:

BODY { background: url(image.jpg) }
BODY { background: url(http://www.url.es/image.gif)}
BODY { background: url( image.gif ) }
BODY { background: url("image.png") }
BODY { background: url(../image.jpg) }
BODY { background: url(carpeta/image.png) }
BODY { background: url(carpeta/carpeta/image.gif) }
Ejemplo:
<style type="text/css>
body {background: url(imagen.jpg);}
</style>
Ejemplo similiar:
<body style="background: url(imagen.jpg)">

Para que la imagen no se
deslice hay que utilizar:
background-attachment: fixed;
/*La imagen se queda fijada en el fondo*/

La imagen de la pagina se repite tanto
horizontalmente como verticalmente.
background-repeat: repeat;

Cuando la imagen es mas
pequeña que el fondo,
la imagen se repite varias veces.
Para que no se repita se emplea el codigo:
background-repeat: no-repeat;

La imagen se repite horizontalmente.
background-repeat: repeat-x;

La imagen se repite verticalmente.
background-repeat: repeat-y;

Ejemplo de una imagen de fondo
que se repite verticalmente:
<style>
body {background-image: url(image.gif);
background-repeat: repeat-y;}
</style>

Ejemplo de un fondo con imagen fija.
<style type="text/css>
BODY { background: white url(fondo.gif);
</style>
Otro ejemplo con imagen fija:
<style type="text/css>
body {background-image: url(image.jpg);
background-repeat: no-repeat;}
</style>

Si quitamos el BODY y ponemos
cualquier etiqueta se insertara un
fondo/imagen en donde la activemos.

Ejemplo con la etiqueta <DIV>
<HTML><HEAD> <TITLE> CSS </TITLE>
<STYLE type="text/css>
DIV
{background-image: url(image.jpg);
background-repeat: no-repeat;
height: 200; width: 200}
</STYLE>
</HEAD> <BODY>
<DIV> Activa el codigo con la imagen </DIV>
</HTML></BODY>

Ejemplo completo de una pagina:
<HTML><HEAD> <TITLE>Ejemplo</TITLE>
<STYLE>
BODY { background: /*imagen del fondo*/
url("http://www.yo.com/images/foto.jpg"); }

#CABECERA{ background: /*imagen de cabecera*/
url("http://www.yo.com/images/image.jpg")
no-repeat bottom center; }

#PAGINA { background: /*imagen del cuerpo*/
url("http://www.yo.com/images/image.jpg")
repeat-y top; border: none; }

#PIE { background: /*imagen del pie*/
url("http://www.yo.com/images/image.jpg")
no-repeat bottom; border: none;}
</STYLE> </HEAD> <BODY>
<CENTER>
<DIV ID=CABECERA>
<P>Aqui va el texto de la cabecera</P>
</DIV>
<DIV ID=PAGINA>
<P> Aqui va el texto de la pagina</P>
</DIV>
<DIV ID=PIE>
<P>Aqui va el texto del pie (abajo)</P>
</DIV> </HTML> </BODY>

Unos valores tales como 20% 65%
especifican 20% de largo y 65% de alto.

Unos valores de 5px 10px especifican que
el borde izquierdo superior de una imagen
esta situada 5 pixeles a la derecha y 10 pixeles
debajo del borde superior izquierdo del elemento.

Si solo se pone la posicion horizontal
la posicion vertical sera 50%.

Estan permitidas las combinaciones
de longitudes y porcentajes asi como
las posiciones negativas.

Por ejemplo de combinacion:
10% 0-2cm estan permitidas.
Sin embargo en palabras clave
las longitudes y porcentajes
no se pueden combinar.

Estas se interprentan como siguen:
top left; = left top;
Es igual a 0% 0%;

top center; = center top;
Es igual a 50% 0%;

right top; = top right;
Es igual a 100% 0%;

right center; = center right;
Es igual a 100% 50%;

left center; = center left;
Es igual a 0% 50%;

center; = center center;
Es igual a 50% 50%;

bottom left; = left bottom;
Es igual a 0% 100%;

bottom right; = right bottom;
Es igual a 100% 100%;

bottom center; = center bottom;
Es igual a 50% 100%;

Ejemplo con varios valores
background: none transparent scrol repeat 0% 0%;

Define un color de fondo
background: transparent; /*Quita el color de fondo*/
background: coral;
background: beige;
background:#FFF;
background:#FFFFFF;
background: #FFEEFF;
background:#000;
background:#000000;
background-color: black;
background-color: #000000;

Ejemplos de cambio de color de fondo.
background-color: Green;
background-color: #003300;
background-color: rgb(200,200,255);
background-color: transparent;
/*Quita el color de fondo*/

Ejemplos con <DIV> y <SPAN>
SPAN {background: beige}
/*Pone un fondo beige sobre texto*/

DIV {background: beige}
/*Pone un fondo beige en toda la pagina*/

Definicion de una imagen de fondo
background-image: none;
background: url(fondo.jpg)
background-Image: url(fondo.gif)
background: ul(http://www.yo.com/fondo.gif)

Dos pagina con una imagen de fondo:
BODY { background: black url(fondo.jpg)}
BODY { background-image: url(fondo.gif) }

Fijación del fondo
background-attachment; fixed;/*queda fijo*/
background-attachment; scroll; /*se mueve*/
Dos ejemplos:
BODY {background-attachment: scroll}
BODY {background-attachment: fixed}

background-repeat: repeat-y; /*repite verticalmente*/
background-repeat: repeat-x; /*repite horizontal*/
background-repeat: repeat; /*repite el fondo*/
background-repeat:no-repeat;/*no repite el fondo*/

Alineacion de imagenes
(La ? es uno o varios digitos).
background-Position: top;
background-Position: left:
background-Position: right;
background-Position: center;
background-Position: bottom;

background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
bbackground-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;

background-position: ?% ?%;
background-position: 50% 50%;
background-position: ?pt ?pt;
background-position: ?in ?in;
background-position: ?pc ?pc;
background-position: ?px ?px;
background-position: ?ex ?ex;
background-position: ?em ?em;
background-position: ?cm ?cm;
background-position: ?mm ?mm;