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;
}
</style>
</head>
<body>
<div class="container col-md-8">
<div id="cover" class="jumbotron">
<h1 class="text-center">Stories for Outcasts</h1>
</div>
</div>
</body></html>
...and what the result looks like:
