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

here is a psd file


I never did a psd -> html, from scraacth so I am learning it. Only passed this

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.

5 Years
Discussion Span
Last Post by tqmd1

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!


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 :)


Use this class in your required div

.transparent {
  zoom: 1;
  filter: alpha(opacity=80);
  opacity: 0.8;
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.