I'm creating a webpage where the body tag's background is an image and my css container is also an image:

body {
background:url(yellowbgimg.gif);
}

`#container {

background:url(bgimg5.jpg);
margin:50px auto 2em auto;
width:80%;
}`

When I code the html the #container appears as a big rectangle in the middle of the page.

What I want is for the container to have a dynamic border so that I can erase bits of the container border (using Photoshop) and then the body image will fill in those erased gaps. This means, of course, that the border around the container won't have vertical and horizontal lines.

Is it actually possible to do this without creating a single image in the body tag? I want to put all of my content into the container.

There's a link on this page to the images that I'm trying to modify.

Thanks.

3 answers

1
point
This was chosen as the best answer

You're definitely in the wrong problem domain. Use PNG with an alpha layer.

CSS3 allows for element-level opacity and property-wide opacity (for colours), and as Nathan said, WebKit has masking features, but what you're looking for isn't a CSS solution.

Beware of the dodgy support for alpha channels in MSIE6 and prior though, You need to use a little JavaScript to fix that. With conditional comments you can hide that from modern browsers, though.

ie7.js is a good script to get rid of a lot of problems with the older versions of MSIE including PNG transparency. If you want a more atomic solution, just search Google for "png fix" and you'll probably find what you need.

Answered about 9 years ago by Alan Plum
1
point

If you want transparency then you need to use PNGs instead of JPEGs.

You can also use WebKit's masking features, but they obviously only work in WebKit.

Answered about 9 years ago by Nathan Duran
0
points

While there are experimental browser features that may support this, the best idea is simply to pre-process the blending in an image editor like Photoshop, then assign the already blended images to the body and #container.

This is cross-browser compatible and keeps debugging to a minimum.

Answered about 9 years ago by Joshua Clanton
  • Except now you have to worry about pixel perfect layouts, too, and can't move the element without having to re-generate the background for it. I wouldn't call PNG alpha support an experimental browser feature considering there are even ways to make IE6 behave and IE7 has been around for almost five years at the time of this writing. Alan Plum about 9 years ago