Build a Tribute Page (Help Needed with Stacking Images)

Hello there,

Having worked on my tribute page for the last couple of hours, I’ve now reached the sad and sorry point where I need to get some help from you guys before I can continue.

It concerns a problem I’ve been having with the uppermost section, namely being unable to get the logo to lie on top of the full-width photo of Becker and Fagen and then place it in the centre. I’ve tentatively tried modifying the CSS position property for the appropriate elements, but this only results in the top section swallowing up the text-based section below it. I’m not sure what I’m supposed to do to resolve the problem, though I’ve wondered if it might have something to do with the underlying CSS that Bootstrap makes use of, which I admit to being unfamiliar with.

Would somebody take a look at my code and tell me what needs to be done?

(Is ‘stacking’ the right word for what I want to achieve?)

You could change the following two css classes:

.landscape {
    max-height: 100%;
    max-width: 100%;
    position: relative;

.full-width-top {
	opacity: 0.6;
	max-height: 100%;
	max-width: 100%;
    position: relative;

and add a new “logo” class:

.logo {
   position: absolute;
   max-width: 70%;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;

You can adjust the max-width percentage or make it a fixed pixel width depending on how you want it to display on various screen widths (i.e. desktop vs mobile device).

1 Like

That’s wonderful! Thank you very much for your help.