Image and text with opacity background in the same DIV

Question

I'm trying to make an image and text with an opacity!

Background appear in the same div without using the image as background. How can I make this work?

Kindly see image:

use **relative** position to __wrapper div__ and **absolute** position for children (__img__, __div__ and __text__) — Farahmand, Jun 29 '12 at 10:46

score 2 · Answer 1 · answered Jun 29 '12 at 10:44

2

<div>
  <span>Title</span>
  <img src="" />
</div>

div{
  position: relative;
}
span{
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  display: block;
}

answered Jun 29 '12 at 10:44

Dipak

11,930
1
30
31

is there also a way to make the span the same width as the image automatically? – Kees Sonnema Jun 29 '12 at 11:18
1

There is! You need to use jquery to calculate image width and apply the same to span – Dipak Jun 29 '12 at 11:20
@Dipaks you don't need JQuery for that - just add `right: 0` to your span CSS – My Head Hurts Jun 29 '12 at 11:55
@MyHeadHurts Please post a fiddle - http://jsfiddle.net/. Let me see how this is possible with right: 0; 'is there also a way to make the span the same width as the image automatically? ' – Dipak Jun 29 '12 at 12:04
@Myheadhurts check now - http://jsfiddle.net/dipaks2011/fbAed/1/ You can call it a trick to make it work by making DIV inline-block :) – Dipak Jun 29 '12 at 12:54
@Dipaks I wouldn't really call it a trick, I would call it the correct way to do it. It is complete overkill to pull in a JQuery library to achieve such a simple layout :) But we can agree to disagree ;) – My Head Hurts Jun 29 '12 at 12:59

score 1 · Answer 2 · answered Jun 29 '12 at 10:44

/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.5 opacity */
background: rgba(0, 0, 0, 0.5);

For rgba the last field is the opacity. It's not fully supported in some older IE versions though so the only fully cross browser method at the moment is to use a transparent image as the background.

score 0 · Answer 3 · answered Jun 29 '12 at 10:49

The first thing you should do is to write HTML:

<figure>
    <img src="/image.jpg">
    <figcaption>Title</figcaption>
</figure>

After that you only have to write CSS: example:

figure {
  position: relative;
}
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.3); // or transparent gif
}

score 0 · Answer 4 · answered Jun 29 '12 at 10:53

When you write background-color:rgba(0,0,0,50); the background will be black and semi-transparent.

It won't affect the transparency of the text because to set the transparency of the text, it's color:rgba(255,255,255,50); If you don't write that, the text won't be semi-transparent.

Image and text with opacity background in the same DIV

4 Answers4

Linked