Overlaying an Image

I haven’t even finished with the ¨Responsive Web Design¨ certification but I already want to start making my tribute page. I ran into a issue, I am wanting to move the image at the bottom of my screen towards the black transparent box; top and center. How can I do that? I’ve tried Google but I must not be typing in the right . I’d appreciate the help.

Your code so far

Hey Kadmiel,

you are currently using a lot of absolute stuff, e.g.

.gray-box{
  position: relative;
  width: 200px;
  height: 1500px;
  margin-top: -1500px;
  margin-left: 0px;
}

This approach is very fragile and doomed to fail, because you build it for exactly one screen size.

You can see this by:

  1. opening the dev tools: F12
  2. opening the Responsive Design Mode: CTRL + SHIFT + M

This will literally break on every smartphone.


My best guess to solve it:

  1. Create a small mockup of your desired result in boxes, e.g. with pen & paper or excalidraw
  2. Give the boxes different colors to see which box lives in which other box
  3. Try to translate your drawn boxes into real HTML boxes, e.g with nested divs

Simple example:

I see what you mean; I think I’m going to start over haha. Thank you for your help.