The Dai Li // An Avatar: the Last Airbender Topsite

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:

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

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