Page Widget How to - Center text on top of background image in HTML

Question

We would like to know how to center text on top of background image in HTML.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.banner {<!--from   w  w w .ja  va2 s  .  c  o  m-->
  position: absolute;
  top: 10px;
  left: 30px;
  width: 1200px;
  height: 250px;
  background: url(http://www.java2s.com/style/download.png);
}
</style>
</head>
<body>
  <DIV class="banner">
    <div style="width: 800px; margin: 0 auto;">
      Celosia - the gothic memory
          card game is a game for everyone, new to this genre or veterans,
          you will truly enjoy the dark atmosphere and awesome music. Help a
          goddess, travel around the world and unveil a big mystery or test
          your skills in the Time attack or Boss modes in over 50 levels.
          Celosia is currently in Alpha stage so everything you see is
          subject to changes. You can also follow the official Facebook or
          Twitter page for updates and news.
    </div>
  </DIV>
</body>
</html>

The code above is rendered as follows: