Help pinning header to base of image

Foundation Box
#1

Hi I’ve been asked to create this -
image

I create a header at the top of an image - use a column with the image as a background and put the header inside (black text white opaque bgd ) but need advice on how to pin the header to the base of a stack/column,

#2

Maybe a CCS class like

.header_bottom {position: absolute; bottom: 0px;}

might help

#3

I have done this for a client with the overlap canvas 1LD - if you prefer a stack…

#4

To add to @Avzw : you could also use Will’s @willwood banner stack for achieving this: BannerStack | Stacks4Stacks

#5

Assign a class to the column:

.relative-container {
  position:relative
}

Assign a class to the text block:

.absolute-text-block
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 60%; /*or whatever*/
  background-color: white
}
#6

You could of course simply use the STH Srcerer image stack - use the “Add Content” feature - choose where the content is to go (in your case the bottom) and you have your issue solved.

1 Like
#7

For Source users, you would just add the Header into a Coder stack and add 1 Utlillity class name.