Alberto López Alberto López - 1 year ago 93
HTML Question

How to add an element on top of an image in HTML?

Im trying to add a "Thank You" banner, that is responsive and maintains the position on any screen.

What I have: (using the tag)

What i have

What I want: (image with horizontal-responsive bar)
Like this:
what i want

Answer Source

This will vertically and horizontally center an element having 100% width.

body {
  margin: 0;
  background: transparent url("") 0 0 no-repeat; 
  background-size: cover;

p {
  background: black;
  padding: 1em 0;
  color: white;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
<p>Thank You!!</p>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download