Ya tengo un marco para la entrada que he destinado a la presentación del blog. Ahora, y para seguir dándole un efecto diferenciador respecto al resto de las entradas, quiero adornar los bordes del espacio destinado al texto con una imagen que se repita dando un efecto mosaico o greca decorativa. He encontrado ayuda en varios blogs para lograr este efecto pero exclusivamente para aplicar en la plantilla del blog, con lo cual quedarán afectadas todas las entradas y yo solo necesito añadir este efecto en una sola entrada.
Después de probar decenas de veces con diferentes líneas de código HTML, he logrado mi objetivo.
Enmarcando una entrada de un blog con una imagen
Para ello de nuevo volvemos a Entradas de nuestro blog. Seleccionamos la entrada que deseamos modificar y hacemos clic en Editar
Ahora vamos a la pestaña HTML como se muestra en la siguiente imagen,
Se
abre una ventana con el contenido de la entrada en código HTML
(HyperText Markup Language o lenguaje de marcas de hipertexto, que
permite crear páginas web, darles estructura y contenido).
En la primera línea está el código que había escrito para crear un marco para la entrada,
<div style="background: #f0ffff; border-radius: 25px; border: 20px groove darkblue; padding: 80px 150px;">
Ahora modifico esta primera línea y elimino el padding, quedando así,
<div style="background: #f0ffff; border-radius: 25px; border: 20px groove darkblue;">
A continuación de esta línea añado el código siguiente,
<div style="background-image: url(URL imagen); background-position: 96% 50%; background-repeat: repeat-y; background-size: 50px 50px;">
<div style="background-image: url(URL imagen); background-position: 4% 50%; background-repeat: repeat-y; background-size: 50px 50px;">
<div style="background-image: url(URL imagen); background-position: 4% 50%; background-repeat: repeat-y; background-size: 50px 50px;">
Borde derecho
En la primera etiqueta <div> registro la URL de la imagen dentro de la propiedad background-image para definir la imagen de fondo.
Con la propiedad background-position establezco la posición de la background-image (imagen de fondo).
Podemos usar para definirla,
Tanto para porcentajes como para longitudes, se especifica primero la posición horizontal, seguida de la vertical. Si solo se da un valor, el valor horizontal y vertical será el mismo. Se pueden combinar longitudes y porcentajes. Sin embargo, porcentajes y longitudes no pueden combinarse con palabras clave.
He puesto para el borde derecho un valor de 96% 50% lo que hace que la imagen se coloque 96% a la derecha y 50% abajo del elemento.
Si se definiera en longitud, por ejemplo 5px 20px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 20 pixels abajo de la esquina superior izquierda del elemento.
Como estas dos etiquetas <div> (la primera para el borde derecho y la segunda para el borde izquierdo) están escritas después de,
<div style="background: #f0ffff; border-radius: 25px; border: 20px groove darkblue;">
el elemento que se toma como referencia es el especificado en esta primera linea y que define el recuadro de la entrada. Por lo tanto la imagen se coloca un 96% a la derecha tomando como referencia el marco previamente definido.
Con la siguiente propiedad background-repeat determino cómo se va a repetir la background-image. En mi caso he establecido background-repeat: repeat-y porque quiero que se repita la imagen formando un mosaico vertical. Si deseara que fuera de forma horizontal sería background-repeat: repeat-x.
Y con la propiedad backgroun-size especifico el tamaño de la imagen. Podemos definirla mediante porcentajes o longitudes (no se permiten los valores negativos). Se definen dos parámetros para el tamaño: el primero es el alto y el segundo el ancho.
También podemos definirla mediante dos palabras,
En la primera etiqueta <div> registro la URL de la imagen dentro de la propiedad background-image para definir la imagen de fondo.
Con la propiedad background-position establezco la posición de la background-image (imagen de fondo).
Podemos usar para definirla,
- Palabras clave horizontales (left, center, right)
- Palabras clave horizontales verticales (top, center, bottom)
- Porcentajes_Se refieren al tamaño de la imagen.
- Longitudes_No son aconsejables por las diferentes resoluciones de pantalla.
Tanto para porcentajes como para longitudes, se especifica primero la posición horizontal, seguida de la vertical. Si solo se da un valor, el valor horizontal y vertical será el mismo. Se pueden combinar longitudes y porcentajes. Sin embargo, porcentajes y longitudes no pueden combinarse con palabras clave.
He puesto para el borde derecho un valor de 96% 50% lo que hace que la imagen se coloque 96% a la derecha y 50% abajo del elemento.
Si se definiera en longitud, por ejemplo 5px 20px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 20 pixels abajo de la esquina superior izquierda del elemento.
Como estas dos etiquetas <div> (la primera para el borde derecho y la segunda para el borde izquierdo) están escritas después de,
<div style="background: #f0ffff; border-radius: 25px; border: 20px groove darkblue;">
el elemento que se toma como referencia es el especificado en esta primera linea y que define el recuadro de la entrada. Por lo tanto la imagen se coloca un 96% a la derecha tomando como referencia el marco previamente definido.
Con la siguiente propiedad background-repeat determino cómo se va a repetir la background-image. En mi caso he establecido background-repeat: repeat-y porque quiero que se repita la imagen formando un mosaico vertical. Si deseara que fuera de forma horizontal sería background-repeat: repeat-x.
Y con la propiedad backgroun-size especifico el tamaño de la imagen. Podemos definirla mediante porcentajes o longitudes (no se permiten los valores negativos). Se definen dos parámetros para el tamaño: el primero es el alto y el segundo el ancho.
También podemos definirla mediante dos palabras,
- Contain: Esta propiedad escala la imagen de forma que mantenga las proporciones y ocupa o el alto o el ancho (dependiendo de la proporción)
- Cover: Esta propiedad escala la imagen al mínimo tamaño, manteniendo también las proporciones, para que ocupe todo el contenedor. Es posible que esto provoque que parte de la imagen no se vea.
</div>
</div>
El resultado es el siguiente,
url_(URL imagen)_Dentro del paréntesis tenemos que escribir la URL o dirección de la imagen que queremos mostrar.
Si utilizo una imagen que está guardada en mi equipo solo la podré ver yo, por lo tanto debo escribir el enlace a una imagen que esté en un servidor web.
La manera más rápida y fácil de subir una imagen es haciéndolo desde el mismo editor de entradas del blog. Dentro de la pestaña HTML, damos click en el icono de la imagen.
Aquí podemos seleccionar una imagen que tengamos en nuestro equipo o bien reutilizar alguna que hayamos usado en el blog, que estén alojadas en la web de Picasa, desde nuestro teléfono, de la cámara web o bien de una URL.
En la red hay muchos hostings (alojamientos web) tanto gratuitos como de pago donde podemos alojar imágenes. Como estoy usando Blogger la mejor opción es la que ofrece Google a través de Picasa.
Yo he subido la imagen desde mi equipo. Ahora aparece en el editor de entradas el código de esta imagen.
Podemos crear una entrada en nuestro blog destinada solo para imagenes. La guardamos como borrador sin publicarla y ahí podemos ir subiendo las imágenes o fotos para ser utilizadas posteriormente cuando lo necesitemos. Una vez se suben a Blogger se alojan también en Picasaweb. También podemos subirlas directamente desde la web de Picasa para añadir luego estas imagenes a nuestro blog.
Las imágenes o fotos deben ser de nuestra propiedad para no tener problemas legales. De todos modos hay páginas donde podemos obtener imágenes gratuitas o con una licencia Creative Commons que
nos permita su uso, como por ejemplo,
- Openphoto
- Pixabay
- Flickr
- Picol
- Banco de imágenes y sonidos del Intef.
- Free Digital Photos.
- Freeimages
- FreePik