www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] How to do image over image with css and z-index?

  1. #1
    Join Date
    Sep 2005
    Posts
    1,632

    resolved [RESOLVED] How to do image over image with css and z-index?

    I have done code for image like example for logo.

    I would like to combine image logo with tagline.
    Just tagline will change and tagline image will be at the top.
    Problem is that both images are seen but it should be effect
    at the top and only image of logo and tagline.

    Please find my HTML code and CSS:
    HTML Code:
    #mylogo
    {
    z-index: 2;
    width:200px;
    height: 45px;
    }
    
    #mylogo img
    {
      border: none;
    }
    
    #mytagline10
    {
    z-index: 2;
    width:200px;
    height: 45px;
    }
    and HTML code:
    HTML Code:
    <img src="mylogo.jpg" border="none" width="200" height="45" alt="" id="mylogo" ><a href=""><img src="tagline.jpg" border="none" width="200" height="45" alt="" id="mytagline10" ></a>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <a href="" style="background:url(mylogo.jpg) no-repeat;"><img src="tagline.jpg" border="none" width="200" height="45" alt="" id="mytagline10" ></a>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Apr 2008
    Posts
    4
    thanks!

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by toplisek
    HTML Code:
    #mylogo
    {
     z-index: 2;
    width:200px;
    height: 45px;
    }
    
    #mylogo img
    {
      border: none;
    }
    
    #mytagline10
    {
     z-index: 2;
    width:200px;
    height: 45px;
    }
    and HTML code:
    HTML Code:
    <img src="mylogo.jpg" border="none" width="200" height="45" alt="" id="mylogo" ><a href=""><img src="tagline.jpg" border="none" width="200" height="45" alt="" id="mytagline10" ></a>
    I'm not sure of two images occupying the same z-index will work (unless one has 'transparent' sections, or is text-based with "background-color:transparent;". Stating both as being "z-index:2;" is no better than just leaving it be the default "z-index;0;"..

    Using a background-image and a foreground image (as Fang pointed out), works very well.

    And an additional note: z-index:value; does not work on any element that is "position:static;", which is the default state of any element.

    z-index will only work on an element with "position:relative;" or "position:absolute;" stated.
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Sep 2005
    Posts
    1,632

    Question

    Quote Originally Posted by WebJoel
    Using a background-image and a foreground image (as Fang pointed out), works very well.
    I have put this code but it seems working just tagline without logo.
    Is there any problem with this code (not all)? Transparent image...for tagline.

  6. #6
    Join Date
    Sep 2005
    Posts
    1,632
    I have tested and found better solution.
    I placed in tag TD my background image. Why do you think code in IE does not work but in Mozilla without problem?
    <td colspan="2" width="300" height="70" background="mylogo.jpg">
    <a href="<?=$_PATH1 ?>index.html"><img src=''mytagline.png" width="350" height="70" border="none"></a></td>

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I'd have to see your HTML, -I'm at a loss as to what you are trying to do...
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles