Jump to content

Overlapping background images with transparency -- showing through


YtAnd

Recommended Posts

Hello again. I hoped I wouldn't have to write again so soon, but ah, well.

 

My site is at http://tiny.cc/vbw71. The problem I'm having is with the navigation blocks on the left. I am trying to adapt Dan Cederholm's "indestructible boxes" method as described in "Bulletproof Web Design" to accommodate transparent top and bottom edges.

 

What I wanted to happen: I have an image of a torn piece of paper. I want to put all the nav text ("About me: Click here to find out about me", etc.) inside the paper. The box/torn paper should expand and contract based on how much text I have in there.

 

The method I used: I divided the graphic in half to make "papertop.gif" and "paperbottom.gif".

I attached paperbottom as the background of the entire

(with class "navbox"), and attached it to the bottom left.

I attached papertop as the background of the h3 within the

, attached to the top left.

 

The problem: The ragged line that you see going through "About me" is actually the top of the "papertop" image. Above that line, the top of "paperbottom" is peeking through.

 

What I tried:

1) Replacing "paperbottom" with the entire paper image

That works if the graphic is expanded out to its full size. But if not, the entire paper image keeps moving up, leading to the same problem.

 

2) Flipping the images

 

3) Playing with padding

 

4) I thought about just making the background of "papertop" white instead of transparent, so maybe "paperbottom wouldn't show through. But it would look obvious for nav blocks further down on the (blue gradient) page.

 

By the way: For an example, I successfully did this in another part of the site, for the content box. But the background wasn't transparent.

 

Can anyone help?

Link to comment
Share on other sites

If I have understood correctly, I got your torn top image to show in Firefox by inverting the background images and adding some padding.

I changed the following in .navbox h3:

 

background:transparent url(../images/paperbottom.gif) no-repeat scroll left bottom;

padding:10px 0 50px 10px;

 

and this in .navbox

 

background:transparent url(../images/papertop.gif) no-repeat scroll left top;

padding:2px 0 0;

Link to comment
Share on other sites

Thanks, virtual, for the help.

 

Now I have something to work with, but am still wondering how to get the box like I envisioned.

To make this easier, you will now link to the original page at the same place. But here's another link to click to get to a page with the changes "Virtual" submitted: http://tinyurl.com/yzr3wxp

Here are some remaining issues:

 

* When I switch the "About Us" text from H3 to H1, the box breaks. Actually, H2 works fine too so I could stick with that. But why is that happening when there is a very large "paperbottom" image to work with?

 

*** How in the world can I get the smaller title underneath ("Find out who I am here") to be inside the box? Ideally, I'd like the padding to pad the text, not just move background images around. With the "Bulletproof" boxes, there is plenty of background image to go around, and the text pushes the box, revealing more or less of the image.

Though the original wasn't working as planned, it made sense to me to put "paperbottom" at the bottom left of the entire div. Then the words inside the

should have always stayed within the "paperbottom" image, right? (But they didn't -- arg!)

 

So far, I can have H2 or H3 information in the box, but no smaller titles underneath. I may end up just going with that, but it is a puzzle I'd like to figure out to get it how I really wanted, if possible.

Edited by YtAnd
Link to comment
Share on other sites

Ok, I have changed the following on your version http://tiny.cc/vbw71 to make the ul li tag sit within the image. I have not tried it in IE so you might want to check that.

 

Remove the background image from the .navbox h3 tag and add

padding:0 10px; (to position your H tag)

 

On the #nav tag add

background:transparent url(../images/papertop.gif) no-repeat scroll 0 0;

 

On .navbox add

background:transparent url(../images/paperbottom.gif) repeat-y scroll 0 0;

padding-bottom:50px;

Link to comment
Share on other sites

Virtual, thanks again for your help with this. I hope I can get to your level someday!

 

I took the new things you suggested and added some to it to create something I'm really happy with. This means I now have 4 URLs. Sorry everyone. But I'll leave them up for a while for people to look at.

 

THE URLs:

-- My original submission: http://tiny.cc/nkzFM

-- Virtual's 1st changes: (the same URL) http://tinyurl.com/yzr3wxp

-- Virtual's 2nd changes: http://tiny.cc/kZ8re

-- My latest version, which I'm very happy with: http://tiny.cc/vbw71

 

What I like about Virtual's 2nd changes:

Placing both of the background images at the top left (0,0) of their containing means there are no more issues with overlapping transparency. Pure genius!

Also, I didn't think of repeating an image vertically to fill in the space. Very nice!

Lastly, switching the the background images were inside of meant the words were inside of the image as I wanted!

 

My one lasting issue was that I wanted the torn paper images to contract or expand depending on how much text was in the middle. It took way too long, but I figured it out.

 

My final version:

 

I went with Virtual's 2nd changes, with slight changes:

 

The top part of the image is aligned in its own div top, left.

 

I added another

, "navrepeat", under that div, also aligned top left. It has a new image of only the middle section, which repeats-y.

 

For the bottom, I created yet another

called "shortBot" (as in short bottom), and aligned the bottom image bottom left. But first I shortened the image of the bottom of the paper to just what was needed and called it "paperShortBot."

 

Final thoughts:

*********** I am happy with this. But there are a LOT of here. If anyone gets a bright idea about how to trim some

s, feel free to post something here! ***************
Link to comment
Share on other sites

BTW, you can remove the "#header" div from your page if you give its background to the #content div, and place it top right. That would be one less div.

 

Also, you should be able to do your left nav like this:

 



Content inside... Use the repeating background on this div, and add margins/padding to move the text into the exact position you want it.


 

You don't really need to make those top/bottom images background images, like you are doing currently -- you could just use regular tags and make the code a lot cleaner.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...