How can I cover a div with a translucent image?

Question

I want to cover <div>so that it looks like a translucent block.

I am using jQuery, but I do not know how to do this.

Any help thanks ...

Answer 1

If you have another div, you can just get the size + position, for example

var $somediv = $('#some_div_element'),
    pos      = $.extend({
       width:    $somediv.outerWidth(),
       height:   $somediv.outerHeight()
    }, $somediv.position());

and then use it when dynamically creating an overlay

$('<div>', {
    id:    'overlay',
    css:   {
        position:         'absolute',
        top:              pos.top,
        left:             pos.left,
        width:            pos.width,
        height:           pos.height,
        backgroundColor:  '#000',
        opacity:          0.50
    }
}).appendTo($somediv);

Example: http://www.jsfiddle.net/GkFu4/1/

Answer 2

You can use CSS3 for this. Place a <div>totally over it and let the <div>background: rgba(255,255,255,.3).