Heading with background : Header : Basic Tags HTML CSS TUTORIALS

HTML CSS TUTORIALS » Basic Tags » Header »

Heading with background


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image replacement</title>
<style type="text/css" media="screen">
.aFancyHeading {
    position: relative;
    width: 279px;
    height: 28px;
    overflow: hidden;
    font-size: 20px;
    }

.aFancyHeading span {
    position: absolute;
    background: red;
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
  <h1 class="aFancyHeading"><span></span>This is the heading</h1>
  <p>This is the content. this is a test. this is a test. 
     This is the content. this is a test. this is a test. 
     This is the content. this is a test. this is a test. 
     This is the content. this is a test. this is a test. 
     </p>
</body>
</html>