27/02/2011

Web Devel: Transparent Background Image

For transparent image[0]:

New layer: 1px (any color)
opacity: +/- 70%
Image: merge visible layers
Save as: PNG; select all except creation time & comment

For HTML & CSS to get the ball rolling:

<div id="outer">
  <div id="inner"></div>
</div>

#outer {
  background-image: any-background-image.jpg;
}
#inner {
  background-color: transparent;
  background-image: transparent-image.png;
}

Notes:
[0] Done in GIMP

See also:
http://docs.gimp.org/en/gimp-image-combining.html
http://www.w3schools.com/css/css_background.asp

0 comments:

Post a Comment