Sunday, August 25, 2013

Translucent text on a Bootstrap 3 cover image

I'm close to debuting a lightweight blogging engine using Go, App Engine, and Bootstrap 3, and I wanted to share a quick solution I found to what seems to be a common problem: putting text on top of a cover image without contrast problems, and without having to explicitly line up a translucent background color with the parent div's corners.

In this case, I'm using a simple Bootstrap 3 jumbotron with a background image declared with the css "background-image: url()" syntax. The jumbotron div has a child H1 element with a sample blog name ("Stories for Outcasts", which I thought was pretty funny, but [probably] won't be the final blog name I choose).

The background image is of my Tom Baker Dr. Who action figure peering at some API or other I was toying with on my laptop. It's mainly a dark image, so I chose white for the superimposed text. Here's the HTML stub:

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta charset="utf-8">
 <link href="Blog_files/bootstrap.min.css" rel="stylesheet">

 <style type="text/css">
  #cover {
   background-size: 100% auto;
   background-image: url(static/cover.jpg);
   margin-top: -20px;

  #cover h1 {
   color: #fff;
 <div class="container col-md-8">
  <div id="cover" class="jumbotron">
   <h1 class="text-center">Stories for Outcasts</h1>

...and what the result looks like: