Text with dark background band over image, at bottom of image

[Adams]

Hello. Is there a way in the Content area of a page to have text with a dark background band over an image, at the bottom of the image (stretches all the way across the bottom of the image)? Like the images at the top of the demo page at http://demo.theme.co/ethos-1/

[friech]

Hi There,

Thank you for writing in! First on the Section, please set your Image as the Section’s background, set the section’s top and bottom padding to 0.

Then on the ROW please turn off the Inner Container option and add a CLASS flex-row

And then add this to Page CSS

.flex-row {
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

Now add your dark background on the Column. You can now add the text on the column that is now positioned at the bottom of the Section.

Hope it helps,
Cheers!

[Adams]

Thanks. I tried applying to the home page for viewing at 1200px+ (see dev1.thumbprintbooks.ca) — but the row is displayed at the top of the section, not at the bottom. How do I get it to be at the bottom of the section? I have put the CSS in Theme Options-CSS instead of the Page CSS.

Also I note that in Firefox the background is only about an inch high on my screen, but in both Chrome and Edge the background is about 80% of the screen. I don’t want it to be any more than needed by the headlines and padding assigned to the headlines.

[ruenel]

Hello There,

Thanks for updating in! Are you referring to this section?

Since the section has a height of 100vh and that the marginless column option in your row is enabled, you must add a minimum height to your row settings as well so that you will have it like this:

Hope this make sense.

[Adams]

Yes that is the section I’m referring to (i.e., the headline THUMBPRINT BOOKS, the line, and the subhead). I’ve changed the vh for the row. But the row is still being displayed at the top of the section. I want it to be displayed at the bottom of the section.

[ruenel]

Hello There,

I have checked again your page and I could not see any trace that you added my suggestions in my previous reply. Well anyway, to make this easier, please have the css code given by @friech updated and use this:

.flex-row {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

Please let us know how it goes.

[Adams]

I had added the CSS code to Global CSS (Theme–>Options–>CSS). Friech’s code had min-height: 80vh whereas yours has 100vh — neither seem to make any difference. The text still sits at the top of the section.

[ruenel]

Hey There,

I’ve checked your page and you did not add 100vh. Please edit it and make it 100vh instead.

If you need anything else we can help you with, please let us know.

[Adams]

Sorry…I had entered the .flex-row CSS on the home page CSS and then later on the global CSS. I had made the change to 100vh to the global CSS but had forgotten about it on the home page CSS. I have now deleted the .flex-row CSS for the home page CSS, so it is only being applied from the global CSS. However, the text continues to be at the top of the page, not at the bottom.

[rad]

Hi there,

The issue is with your column’s inline style.

    height: 15vh;
    min-height: 15vh;

Please change it to something like this

    height: 100vh;
    padding-top: 50vh;

You may change the value of padding-top to make sure it’s positioned in the bottom.

Thanks!

[Adams]

Thank you. That was the last change that needed to be made. THANKS AGAIN for your support!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Adams]

Even though the column height 100vh, the padding-top of 80vh to 60 vh looks fine on the different screen sizes in X Pro. But when viewing on actual devices, sometimes the text is pushed partially or fully below the screen (pushed behind the following section, so it can’t be viewed). Is there a way to prevent the text from being displayed below the 100vh of the applicable screen? (The page I’m work on is dev1.thumbprintbooks.ca)

[Joao]

Hi There,

Please use :

min-height: 100vh;

instead of

height: 100vh;

height, is absolute while min-height is not, so if more height beyond 100vh is necessary it will be expanded.

Let us know how it goes.