[Resolved] Valign title or text to the bottom of hero page with full width and transparency

[manteniendo]

Hi,

About this webpage: http://www.manteniendo.com/sobre-mi/

I want to include the title “Sobre mi” in the Page Hero with some transparency, just like the navigation bar but to the bottom. Now is inserted with your Headline generateblock but I don’t like, I prefer to have it melt with the picture.

I’ve tried adding padding and margin at a <p> and

blocks inside the pagehero element but doing that screwed completely how the picture was shown in the pagehero.

I’m not a wordpress specialist this is just my personale webpage, excuse me if this is easy to do.

Many thanks

PD: I suggest you to improve this support forum, searching previous questions isn’t user friendly at all.

[David]

Hi there,

in your Header Element:

1. Remove the value from the Bottom Padding and add it to the Top Padding.
This will push any content to the bottom of the element.
2. Add your content as a simple Paragraph eg.

<p>Solo mi</p>

3. Add this CSS to style your text:

.page-hero p {
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 2em;
    font-weight: 700;
}

[manteniendo]

Many thanks DAVID that worked!

I know what was doing wrong, I’m using spanish translation and Bottom is translated Fondo, but Fondo in spanish oftenly is used like Background, now I understand why the pagehero layout was doing weird things.

Thanks again!

[David]

Glad to hear that – and thanks for pointing out Bottom > Fondo > Background – that may explain a lot of confusion 🙂

[Author]

Posts