How to make image "hang over" above background ?

Question

Hello All:

I am more a web programmer than a designer, but currently my job requires me to know more about web design. Sorry if the question is naive to the pros.

Stuck in this problem for hours, don't know what to do...

Please go the my blog and check the bottom part: my blog

It has a wax seal style rss feed image, with ribbon. I want to have the ribbon lie above the background color (the parchment paper, that is) so to display the wooden background. But I failed in this for hours. Done some research online and tried several different ways. Still with no luck.

The visual effect I want to achieve can be found on this webpage: The image of the father and his child illustrates what I want to have : http://www.havocinspired.co.uk/

Please use FireBug and check my css stylesheet. I use a tool called Artiseer to help me get around the fundamentals. So perhaps that's how everything looks so messy under the hood.

Thanks a lot in advance!

Answer 1

You need to change your html to this:

<div class="art-Footer">
  <div class="art-Footer-background">
    <div class="art-Footer-inner">
      <a href="http://chenximao.net/blog/feed/" class="art-rss-tag-icon" title="RSS"></a>

    </div>
  </div>
</div>

Then change your styles (change the relevant styles to what you see below, or compare whats below to what you have to find what I took out):

.art-Footer { margin:20px auto 0; position:relative; width:884px; z-index:0; }

.art-Footer .art-Footer-background { background-image:url(images/Footer.png); background-repeat:repeat; bottom:45px; height:75px; left:0; vertical-align:top; width:884px; z-index:-1; }

.art-Footer .art-Footer-inner { padding:5px; position:relative; text-align:center; z-index:0; }

.art-rss-tag-icon { background-image:url(images/rsssealicon.png); background-position:left top; background-repeat:no-repeat; display:block; float:left; height:100px; margin:0 -120px 0 50px; position:relative; top:-11px; width:62px; }

Answer 2

Try giving it a negative margin-bottom.