Text over image with tranparent background

HTML & CSS
1

Hi Folks,

Could anyone please tell me how this is done?

Like on the bbc site at the top of the homepage:

Many thanks

2

Thanks for your reply.

Sorry I didnt explain myself properly.

Its the main headline underneath the logo. The main photograoh with the headline overlaying it.

Can you please tell me how to do that?

Thanks again

3


no text, just negative space creating what looks like letters. They’ve pulled the text offscreen using a negative text indent, which isn’t something I recommend, but likely they chose it because they really are using a semi-trans image (likely so they can use it on all different colour backgrounds).

Eric Watson has a method of doing something like Gilder-Levin image replacement with semi-trans images using negative z-index.

4

This effect here:

5

I can’t find any page that has that… can you link to the specific page??

However I’ve seen similar caption boxes and many sites add it with Javascript. However you can do it with CSS… it can be complicated, or not cross-browser, depending on who you’re writing for.

The easiest way, if your large images are all about the same size, is to use a semi-trans png for the black, and have that set as a background for the box holding the caption text.


<div class="image">
  <img src="blah.jpg" width="" height="" alt="whatever">
  <p>Caption text is teh jawsomes!</p>
</div>

...
div.image {
  position: relative;
  set dimensions?
}
.image p {
  /*either absolutely position this box to the bottom of .images, or set a min-height in ems' and pull up with an equal amount of negative margin and set to position: relative*/
  style text;
  background: url(thesemitrans.png) 0  0 no-repeat;
}

Issues with this method: IE6 doesn’t like semi-trans pngs (I’d just save the image while black is set as the background colour, since your image editor will save that, and IE6 will just show flat black instead of see-through black), semi-trans png’s are larger in filesize than flat images, and depending on the large image’s colours, someone could have trouble reading your caption if for some reason the semi-trans image doesn’t load.

Or, you could use CSS opacity: this means filter for IE6-8.


<div class="image">
  <img....>
  <div></div>
  <p>Caption text is teh jawsomes!</p>
</div>


.image div {
/*set height etc*/
  background-color: #000;
   -ms-filter:"alpha(opacity=50)";
   filter:alpha(opacity=50);
  -moz-opacity:0.5;
  opacity: 0.5;
}

Since children inherit (not technically but practically) their parents’ opacity, you can’t have any text inside this div. The text then cannot be too tall, as you’re going to pull it up over the semi-opaque p. I did this with a semi-trans blue box on an envelope image on this page (resize your browser so the envelope moves around…).

It’s pretty brittle unless you can guarantee the heights of both the caption and the text that you will fake to look like it’s “inside” the black area.

The third option I can think of is using the new background opacity setting that comes with CSS3’s color settings. It’s not crossbrowser, but the browsers who don’t support it would simply show the background colour as a solid.


<p>Caption text is teh jawsomes!</p>

.image p {
  color: #fff;
  background-color: rgba(0,0,0,0.5);
}

I think this might be the way I’d try first just to see how it works, and if I cared about the cross-browser thing. I think it’s a disadvantage that only rgb colours work currently, I’m rather fond of hex myself.

Remember that where I’ve used a p, you can use any block container and have several different children inside (the BBC pic you post looks to have a header and then an unordered list of links).