Layering two images on a page

cluksha · Posted: Thu Dec 02, 2004 11:54 am Post subject: Layering two images on a page

I am attempting to layer two images atop one another via the element they
are contained in. Here is a sample of what is going on....
www.echowebservices.com/misc/problem.gif

The css looks like this:
body {
padding: 0;
margin: 0;
font-size: small;
background-color: #fff;
background-image:url(../images/blackleft.gif);
background-position:left top;
background-repeat: repeat-y;
font-family: Verdana, Arial, Helvetica, sans-serif;
/*/*/line-height: 155%; /* */
}
#header {
padding:1em;
}
#container {
background-image:url(../images/HeaderBkgrd.gif);
background-position:right top;
background-repeat: no-repeat;
height:500px;
padding-top:100px;
padding-left:145px;
}

The html looks like this:
<body>
<div id="container">
<div id="header">
</div>
<p>asda</p>
</div>
</body>

So you can see I am attempting to put the black bar on the left, as the
background of the body, so it is always there, And the tilted tan bar on the
background of the container div. This allows me to get the effect in the
image above. It is sound, it seems. It works great, except for the little
jagged white spots where the black intersects with the tan.

1. Can anyone tell me how I might get rid of the white matting that is showing up on the black? I have attemptedto make the make a neutral gray, but that makes all the rest have a gray outline.

2. Or can anyone think of a better way to do this? I can not make the
background all one image, simply because there is an icon on the right side of the page tha always needs to be in the top right corner and the black needs to always be on the left. If it were one image, that would constrict me to a set resolution map. And that is no good since I want it to be 100% on any resolution.

I hope all that made sense.

Thanks!
Chris

BryanDowning · Posted: Thu Dec 02, 2004 3:37 pm Post subject:

Well, this is how I would do it. The code is pretty sloppy, but take a look at it and see if that will work out for you.

http://bry.oybro.com/100webpage/index.html

cluksha · Posted: Thu Dec 02, 2004 3:44 pm Post subject: Header is angled full width

The only problem with that is that I need the angle to follow through all the way to the right. Like so.. www.echowebservices.com/misc/problem1.gif

So the angle will always float above the black nav bar as the screen is resized.

What I ended up doing in the short term is saving the image with a diffusion transparency dither so the black is only slightly choppy.

Thanks!
Chris

webguy · Posted: Thu Dec 02, 2004 11:20 pm Post subject:

why would you say it's the black image that's choppy?
I would tend to say it's the tan image that is at fault..
It must have some light colored matting applied..? I don't see how else you could get that white(light colored) pixelization happening otherwise..?

Correct me if I'm wrong here lol

From what I know about this website I can't give much help. There are too many questions? But if you could answer them or even post a link to the site I might be able to figure something out. I'm no wiz, but I do know a little something something about web design.

1) Is this a 100% width design? Meaning does the black image touch the left side at all times, and does the tan image reach all the way to the right side at all times?

2) if this is supposed to NOT be a fixed width design, how do you plan on having the angled header image shrink or grow with window resizing? It seems that would be an issue in itself. (I ask because a fix for what you want, or a giving a suggestion means I need to know how the layout will look and work.)

One quick suggestion:
If you know that the black image will never get any wider, and that the tan image will never get any taller(height), you could use two header images. One with a black matting, and ending right at the end of the black image, and the other image could just be floated to the left, no matting, and would presumably line up properly.

cluksha · Posted: Fri Dec 03, 2004 8:32 am Post subject: Black is correct :)

You were right in that the black was not the issue. I mis represented the problem I guess. It is the tan image over the black that is the problem.

You can see the page layou here http://www.echowebservices.com/temp/ and it will answer your questions below I think.

The css is at http://www.echowebservices.com/temp/css/global.css

Thanks!
Chris

BryanDowning · Posted: Fri Dec 03, 2004 1:05 pm Post subject:

Interesting the way you solved the problem. There's still some white there though on the tan image though Frown

webguy · Posted: Sun Dec 05, 2004 11:03 pm Post subject:

Thanks for the link.

I understand now what you are talking about, and it is a bit of a problem.
Transparency sucks in IE. If it supported png24 your problems would be over.

With gif and png8 I don't know of a way to get around this issue.

Frankly you've done a very good job with what you have.
I was looking into possibly using borders to get the angled header,
but that did not work out too well. I ran into 3 problems.
1) bg color was not the same
2) I got jagged edges
3) It was not flexible, so it would not resize to window width

For prob 1, I suppose you could use the hex code even if not a websafe color.
For prob 2, the jagged edges I do not know how to fix. Not unless you use many many divs, float them left, and each at a steeper angle. This would also presumably solve prob 3. Since the divs would all float left, you could expand the size of the divs to fit a 1200(w) resolution. If you then used absolute positioning for the header, you could set it to stay a certain distance from the right. Thus it would still be pushed off screen when the window is resized giving the same effect we crurently see.

Basically you would e drawing this header purely with CSS. as for header text, links and the sort, there is always z-index.

A link to what I am talking about when I mention borders and divs.
http://www.infimum.dk/HTML/slantinfo.html

Copyright © 2003-2016. PhotoshopForums.com, iFroggy Network. All Rights Reserved. Powered by phpBB © phpBB Group. phpBB SEO. Privacy Policy. We are in no way affiliated with Adobe. Photoshop, Adobe and related marks are registered trademarks of Adobe.