Saltar al contenido

Cómo agregar una imagen de borde inferior con css

Mantén la atención ya que en esta crónica encontrarás el resultado que buscas.

Solución:

Aquí tienes dos opciones que te permiten hacer lo que quieras sin recurrir a border-imageque en realidad no está diseñado para lo que quieres hacer.

imagen de fondo + :después

Esto usa un pseudo-elemento (:after) para “insertar” un bloque con su imagen dada como el background-image. Creo que esta es probablemente mejor que la siguiente opción, ya que es menos perjudicial para el estilo del elemento.

.entry-title:after 
    content: "";
    display: block;
    height: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;

http://jsfiddle.net/mh66rvbo/2/

imagen de fondo + relleno

Esto usa padding-bottom para hacer espacio para la imagen, luego pega la imagen a lo largo de la parte inferior del elemento, colocándola en el centro.

.entry-title 
    padding-bottom: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;

http://jsfiddle.net/mh66rvbo/1/

Si conservas algún recelo o capacidad de beneficiar nuestro crónica te evocamos añadir una interpretación y con deseo lo estudiaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *