Transparent backgroud with some items on top

[McLaren]

Hello,

I don't even know how to google search, what I want to do:

here is a psd file

http://mzfrkd.deviantart.com/art/Green-Leaves-PSD-73025919

I never did a psd -> html, from scraacth so I am learning it. Only passed this
http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

tutorial. But what was written in this tutorial - to repeat the steps wasn't difficult.

So can you give me some other tutorial, or just say how do I make the background like in that psd? Some of the leaves are on top, some under. Do I need to use seperate div for them or what?

Also what about wider monitors - how this should look in the side? Just cut leaves? not too nice I guess.

[suhaildawood]

With CSS, you can edit the opacity of a div, but everything within that div (such as a content) will also be set at the same opacity. What you could do it make a 50x50 square in photoshop, lower the opacity, make sure there is no background, and save that as a PNG file. Then, create your content div and use this:

#content {
	width: [width];
	height: [height];
	background-image: url('[path to png]');
	backrgound repeat: repeat;
	margin: auto [to center the div];
	margin-top: [how far div is from top of page];
	border-radius: [# of pixels];
	box-shadow: [add this in];
}

Please note that some of this is CSS3, so it will only show up in a compatible browser. Also, I added in the border-radius and box-shadow, looking at the link you gave. Remember, make the CSS3 stuff browser specific (e.g. -webkit-box-shadow)

Hope this helps!

[McLaren]

Thank you, I will try this later, now going to sleep :)

[McLaren]

Just tried this out and this worked so perfectly, ant least on google chrome :D I am afraid to open this in IE7 , but later I will have to take a look at this as well :) Thank you again :)

[tqmd1]

Use this class in your required div

.transparent {
  zoom: 1;
  filter: alpha(opacity=80);
  opacity: 0.8;
}