Transparent Background For Text On A Picture

On a little sie project that I’ve been working on, I came across a layout problem that I was having a hard time finding a solution to. I wanted to show a picture and at the bottom have the name of a winery with a transparent background behind the name so that you could see the picture through it. I wanted to do this for a few reasons:

  1. It helps with the layout as I don’t have to worry (as much) about the color of the picture and the color of the font.
  2. It looks nice
  3. It seems like a fun challenge – this may actually be the main reason I wanted to do this…

At the end, this is what I ended up with

Final page

Final page

So let’s take a look at how to do this.

First let’s look at the bare bones html for the page.

<!DOCTYPE HTML>

<head>

<title>Image Test</title>

<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>

<div id="picture">
	<img src="images/Chimney-Rock-Winery.JPG" alt="Chimney Rock Winery"/>
	
	<div id="name_bar">
	</div>
	
	<div id="winery_name">
		Chimney Rock Winery
	</div>
</div>

</body>

And this is what the page looks like so far

Bare bones HTML page

Bare bones HTML page

Now we need to start in on the css file. We have 3 unique div’s on our page at this time, so we’ll do some basic markup for sizing and coloring. There’s nothing too exciting here, but we are starting to size things up here.

#picture {
	width: 640px;
	margin: 0px;
}

#name_bar {
	background-color: #000000;
	height: 50px;
	opacity: .33;
}

#winery_name {
	padding: 10px;
	font-size: 1.5em;
}
Starting to style the page a little

Starting to style the page a little

Now we have the three elements we want on the page, we just don’t have them in the right place, so let’s start positioning things around. We will start by adding in a relative position element to both the bar and the winery name. Also, we will add a z-index element so that each of the elements are stacked in the proper order. Finally, we will start nudging the elements up with negative top-margins so they overlap. This last step was the key thing that I was able to piece together from my research on the web.

Here’s the final css file

#picture {
	width: 640px;
	margin: 0px;
}

#name_bar {
	background-color: #000000;
	margin-top: -54px;
	height: 50px;
	position: relative;
	z-index: 1;
	opacity: .33;
}

#winery_name {
	color: #ffffff;
	padding: 10px;
	margin-top: -50px;
	font-size: 1.5em;
	position: relative;
	z-index: 2;
}

One thing to note, the opacity tag is the one that works for Chrome. If this was production level code, I would have included all of the other -moz-, -webkit-, etc prefixes…

And here’s the final screen shot.

Final page

Final page

Fun project and a nice looking final result.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>