Overlay on Full Page Background

Posted on    Estimated reading time: 1 minute

There are good reasons to build a simple one-page website. While there are great content management systems and frameworks available, creating a simple business card style website is often necessary. These websites can be particularly helpful as placeholders while you align your company's strategy to your software applications.

Getting started is pretty easy, and you can do it with a simple text editor like Notepad, TextEdit or Geany.

Directory Structure

Setting up a basic structure for your files helps to keep things organized. Even if I only have a couple of files, I like to separate css, javascript and images into their own folders.

index.html


<!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">
<head>
  <title>Website Title</title>
  <link rel="icon" href="favicon.ico" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
  <img src="images/background-image.png" class="bg" alt="" />
  <div id="container">
   <div id="info_outer">
    <div id="info">
     <div class="content">
      <h1>New Brunswick</h1>
      <p>Waterfalls and Covered Bridges</p>
     </div>
    </div>
   </div>
  </div>
</body>
</html>
 

style.css

body {
    background: green;
}

img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

#container {
    text-align: center;
}

#info_outer {
    position: absolute;
    top: 50%;
    left: 50%;
}

#info {
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    border: solid 1px #000;
    width: 640px;
    height: 360px;
    margin: 0 auto;
    text-align: center;
    margin-top: -265px;
    margin-left: -320px;
}

#info .content {
    padding: 80px 70px 0;
}

#info p {
    display: block;
    margin: 40px 0;
}