Image Overlay Problem

HTML & CSS
1

Hey guys, I’ve been bashing my head into the wall over this for the last two hours.

I have two images, both of which have a width of 600px. Their container has a min-width of 600, and a max-width of 990. Both images are positioned 50px outside of the container, and I want one image to overlay the other, to create a line that will expand as the user resizes their browser. However, I can’t get them to overlap, as they just break the container.

See http://www.leafspirit.com for what I’m talking about.

Here is the CSS for the divs containing the images


#headerBG{
width: 600px;
height: 220px;
z-index: 1000;
left: -50px;
position: relative;
}

#branding {
width: 600px;
height: 200px;
z-index: 1001;
right: -50px;
top: 0;
position: absolute;
}
2

I’m not exactly sure what you are trying to do, but it sounds like you’d be better off using background images. For example, have one image as a background on #headerWrapper, and the other on #headerBG. Whichever you want to sit underneath when they overlap, but that on #headerWrapper. You could align one to the left and one to the right.

That should work nicely. :slight_smile:

3

Thanks for the response!

I thought of that, except when I apply one of them as a background, since the positioning is negative, part of them gets cut off, and I couldn’t manage to fix that problem either. Tried applying overflow: visible and everything else I could think of. Starting to have fantasies of laptopicide at this point.

EDIT: as for what I’m trying to do. I want the headerBG image to stay on the left when the page is resized, and the branding image to stay on the right, and as the page is resized, the line between them will expand and contract.

4

Ok, I guess disregard this question. Apparently all it took was adding position: relative to the wrapper class. I didn’t think I had to explicitly define it as such, but then I’ve been working with CSS for all of 2 days.

5

Not sure what you mean by that. There’s no need for any “negative” positioning.

I want the headerBG image to stay on the left when the page is resized, and the branding image to stay on the right, and as the page is resized, the line between them will expand and contract.

It’s doing that now, as far as I can see. It’s just that the page can’t expand much because of the max-width that’s set (which isn’t very wide).

6

Ah, I see. I was already looking at the updated page. Glad you got what you wanted. :slight_smile:

7

I mean that the images extend 50px outside of the wrapper on either side. I suppose you’re right and I could have just set the contentWrapper width to less than the header, but you have to keep in mind that I’m pretty much just winging it the whole way through with a grand total of a weeks worth of web design knowledge that’s spread across every possible field. Basically I have very little clue what I’m actually doing and I’m just bashing my head against whatever brick walls I come to until I figure out a way to get what I want. Hence why my max-width is what it is, because I didn’t think to do any screen resolution research until yesterday, so I had no clue that almost 80% of web users have resolutions larger than 1024. It’s not exactly a big deal though, since the only things I’ll have to redo when I change it to something more audience appropriate are the header images, which are placeholders anyway, but I’m too sick of dealing with that particular problem to go spend another 8 hours floundering my way around GIMP right now.

Thanks for the reply!

8

Well, you’ve done jolly well for being at it such a short time. Yeah, I didn’t realize quite what you were doing. Anyhow, 900px or thereabout is fine for a width, IMHO. I just wondered if you weren’t suer why the divs didn’t keep expanding. :slight_smile: