La etiqueta span en imágenes

Hace unos días hablábamos de la etiqueta span y los estilos, en concreto añadíamos estilos a un texto.

Siguiendo con la etiqueta span vamos a jugar con imágenes, nos situamos en plantilla Edición de HTML y  justo antes de </body> añadimos <span class='imagen'/> con "imagen" creamos la clase para añadir los estilos. Guardamos los cambios y nos situamos justo antes de ]]></b:skin> para añadir los estilos y la imagen.

Como es lógico debemos saber el lugar donde añadiremos la imagen, para eso es bueno recordar lo siguiente:

top = Parte superior
bottom = Parte inferior

right= Derecha 

left = Izquierda 

height = Altura 

width = Anchura

fixed = La imagen queda estática, fija al fondo

absolute = Posición asignada

Como ejemplo crearemos una clase. En esa clase especificamos que la imagen se sitúe a la izquierda y arriba del todo "left:0px;" "top:0;" le damos la anchura de la imagen que en este caso ocupará todo el ancho del blog "width:1100px" y añadimos altura "height:110px;" para que cuando hagamos uso del cursor la imagen quede estática añadimos position:fixed;

.imagen {

background:transparent url(url-imagen) no-repeat;

height:110px;

width:1100px;

left:0px;

top:0px;

position:fixed;

}

.imagen {

background:transparent url(url-imagen) no-repeat scroll 0 0;

height:168px;

width:444px;

top:0px;

left:0px;

position:absolute;

}

.imagen {

background:transparent url(url-imagen) no-repeat;

height:110px;

width:100px;

right:180px;

top:90px;

position:absolute;

}

.imagen{

background:transparent url(url-imagen) no-repeat;

height:130px;

right:260px;

bottom:75px;

width:130px;

position:fixed;

}

.imagen{

background:transparent url(url-imagen) no-repeat;

height:130px;

left:60px;

bottom:75px;

width:130px;

position:fixed;

}

.imagen{

background:transparent url(url-imagen);

height:20px;

width:1100px;

left:0px;

bottom:0px;

position:fixed;

}