The Dai Li // An Avatar: the Last Airbender Topsite
Es sabio elegir la felicidad y el amor.
Oct
18
2009

Imagen y color de fondo en el post

Hay algunas formas de poner una imagen y/o color de fondo en las entradas de nuestro blog.

En Diseño | Edición de HTML buscamos algo como esto

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
background: #1B1E20 url(URL DE LA IMAGEN);
}


Se le añade lo que está en negrita y donde está URL DE LA IMAGEN pondremos la url de nuestra imagen de fondo.
El color de fondo es #1B1E20 podríamos poner cualquier otro color.
En caso de no querer usar una imagen sólo es necesario agregar background: #1B1E20;

En caso que sólo se quiera añadir al cuerpo del post se añade el mismo código a post-body
.post-body {
margin:0 0 .75em;
line-height:1.6em;
background: #1B1E20 url(URL DE LA IMAGEN);
}


Cuando queramos que el cuerpo de una entrada en particular tenga cierto fondo la escribiremos dentro de este código:
<div style="background: #1B1E20 url(URL DE LA IMAGEN);">El contenido del post, puede ser cualquier cosa, texto, imagen, video, etc.</div>

Ir al formulario 2 Comentarios:

1
Claudio Curieses dijo...

Gracias, estaba buscando algo tan simple como esto desde hace tiempo. Ahora solo me falta adivinar como cambiar el color y el formato de la letra de un post

2
Bonzu Pipinpadaloxicopolis III dijo...

Muchas veces cuando estamos aprendiendo no sabemos lo fácil que es, pues para cambiar los formatos de la letra añades las propiadades en

.post {

}


ó

post-body {

}

Publicar un comentario

De preferencia lea mi política de comentarios.

Puede comentar con su cuenta Google (Google +, Blogger, Youtube, etc.)

En caso de que usted no disponga de una cuenta seleccione Nombre/URL donde dice "Comentar como:" coloque su nombre o pseudónimo, y en URL la dirección de su página (como la de Facebook, Twitter u otra) y recuerde que la dirección web debe iniciar con http://

Al comentar puede utilizar algunos códigos HTML
En negrita <b>texto</b>
En itálica <i>texto</i>
Crear un enlace <a href="url-de-la-página">Texto</a>


Si el formulario anterior no funciona puede enviar su comentario utilizando los métodos antiguos:
En una pequeña ventana emergente
⇧ Ir arriba Comentar en una nueva pestaña