How to add opaque image over transparent Div

Hello
I'd like to know how can i add an opaque image over a transparent div.
This is how it currently looks like http://i.imgur.com/6dI3C3P.png
I want to make logo image Opaque.
Thanks

 

Instead of making the div transparent, use rgba to make it's background transparent. Then your foreground image can be normal alpha transparency, or even better use "close-enough AA". If going single colour, monochromatic + alpha transparent image might also be useable.

But really for what's being done there, I'd not make the DIV transparent, I'd make it's background and/or borders transparent with RGBA.

 

Hello,
Thank you for your Response.
But the issue is i`m kinda new to this thing.

div.background {
    background: url(/images/bck.png) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.5;
    filter: alpha(opacity=60); 

}

    <div class="background">
     <div class="transbox">
        <img src="images/logo.png" alt="">
     </div>
    </div>

Code (CSS):

Here is the Code if you caan help me with it

 

Lose the opacity and filter lines from .transbox and swap background and border for:

background:rgba(255,255,255,0.5);
border:1px solid rgba(0,0,0,0.5);

Code (markup):

"RGBA" the first three values are red, green and blue just like the hex numbers, the final value being the opacity of the color. It colors the DIV transparent without MAKING the div or it's contents transparent. Pretty slick -- BUT, beware it will NOT work in IE8/earlier. You can TRY using this filter:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);

Code (markup):

Which will at least do the white background, but it can cause problems in IE9 so either put it in a conditional comment, or just live with it not working in old versions of IE. I'd probably just give it a fallback solid color:

background:#FFFFFF;
background:rgba(255,255,255,0.5);
border:1px solid #000;
border-color:rgba(0,0,0,0.5);

Code (markup):

the lines with RGBA being ignored by browsers that don't know that newer property and sticking with the solid color declared before them.

That said, your markup reeks of being built as presentational instead of semantic. If that's a site logo that's presentation for text, so it should probably be added by the CSS -- it would also stand to reason that if that's the main header of the site it should be a H1 saying the site title. IDEALLY an image replacement effect like Gilder-levin should be used, but the use of opacity pisses all over that aspect of accessibility (which is why artsy fartsy design concepts like this one are what I call "not viable for web deployment") so you'd probably be stuck using a massive negative text-indent instead.

The use of massive background images like that in the site you linked to is ALSO artsy-fartsy bull I'd not be putting on a website either -- if I could see your actual image and/or what you are trying to accomplish I could probably dial in the answer better, though the answer might be akin to Groucho Marx's response to "Doctor, doctor, it hurts when I do this!"

Assuming the massive background that you have on it's own DIV is on BODY:

<h1>
	<a href="/">
		Site Title
	</a>
</h1>

Code (markup):

h1 {
	/* hide the text on CSS layouts */
	text-indent:-999em;
	/* set line-height below (the 32px part) to height of the logo.png */
	font:bold 16px/32px arial,helvetica,sans-serif; 
	background:#FFFFFF url(images/logo.png) center left no-repeat;
	background-color:rgba(255,255,255,0.5);
	border:1px solid #000;
	border-color:rgba(0,0,0,0.5);
}

Code (markup):

Again though, I wouldn't actually do that on a page as it means images off with CSS enabled there's no fallback text.

Remember, a H1 is the heading under which everything on a page is a subsection, so whenever possible that should be your FIRST tag on a page, and it's why having more than one H1 is gibberish no matter what the HTML 5-tards says. H2 indicate the start of subsections of the H1, H3 are the start of subsections of the H2 or so forth -- that's why they have levels; just as HR means "a change in section / topic where a heading is unwanted/unwarranted" and not "draw a line across the screen".

There's a reason the development method I advocate involves putting all the content or a facsimile of future content into a text editor as if HTML doesn't even exist, organizing it into a logical order, then marking it up semantically (so no DIV or SPAN at that point) -- semantic markup being a sick euphemism for "using HTML properly" by saying what things ARE, and NOT what they look like. If when you are adding your H1, H2, P, UL, etc, etc, you are thinking about what things look like, YOU ARE DOING IT ALL WRONG. Then and only once the ENTIRE page full of content is marked up do you start adding DIV and SPAN and trying to create the layoutS for all the different media targets using CSS.

It's called progressive enhancement, and with it a page can "gracefully degrade" if any fancy bits like CSS, JS or even HTML fail to work or be unavailable. It's the cornerstone of accessible design no matter how many PSD jockeys and visually oriented artsy types claim otherwise.

 

Thank You Very Much.