Alberto López Alberto López - 6 months ago 15
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

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

body {
  margin: 0;
  background: transparent url("https://images.unsplash.com/photo-1459664018906-085c36f472af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0eee25e1e8252c9ec91aa736760d1a2e") 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>

http://codepen.io/antibland/pen/QNJVqW?editors=1100

Comments