getup8

A blog about a mediocre developer's side projects, explorations, and musings

Splash Page with Cover Image

This is part 2 of a series exploring how to get a simple splash page up and running.

This post will walk through the HTML and CSS needed to create a simple splash page with a background image.

The Template

Let's start off with a bare-bones HTML template.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Splash Page</title>
  </head>
  <body>
    Coming soon...
  </body>
</html>

Example

Next, let's add a background color and a logo that stays centered both vertically and horizontally.

Using flexbox, this is easily done with a few lines of CSS. The gist of it is below.

.splash-container {
  background-color: darkcyan;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Example

The Background Image

The last step is to swap in an image for the background. We'll pick a fitting photo from the ubiquitous Unsplash.

Taking what we have so far, we just need to add a bit more CSS.

.splash-container {
  /* Have the image take up the full viewport */
  height: 100vh;
  width: 100vw;
  background-image: url("images/splash-bg.jpg");
  /* Scale image to cover entire container, preserving aspect ratio */
  background-size: cover;
  /* Center the image */
  background-position: center center;
  background-repeat: no-repeat;
  /* ... everything from above ... */
}

And that's it. This used to be much harder but is pretty trivial these days.

See the finished product here with a screenshot below.

splash page screenshot

The full HTML and CSS for this is below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Splash Page</title>
    <!-- Custom Fonts. Optional. -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Aladin&display=swap" rel="stylesheet" />
    <style>
      /* Ensure the body takes up the full viewport, and default margins are removed */
      html,
      body {
        height: 100%;
        margin: 0;
      }
      /* Use flexbox to simply center both horizontally and vertically */
      .center {
        background-color: darkcyan;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .splash-container {
        /* Have the image take up the full viewport */
        height: 100vh;
        width: 100vw;
        background-image: url("images/splash-bg.jpg");
        /* Scale image to cover entire container, preserving aspect ratio */
        background-size: cover;
        /* Center the image */
        background-position: center center;
        background-repeat: no-repeat;
        /* Center all content within the container */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
      }

      /* Style the logo */
      .logo {
        color: white;
        /* Add text shadow to make it slightly more readable */
        text-shadow: 1px 1px 4px black;
        margin: 0;
        font-family: Aladin, system-ui, sans-serif;
        font-size: 5rem;
        /* Add padding to shift slightly up and keep it away from margins */
        padding: 50px 20px 150px 20px;
      }
    </style>
  </head>
  <body class="splash-container">
    <h1 class="logo">Splash Co.</h1>
  </body>
</html>