Top left image

Discussion in 'CSS' started by PoohBear88, Jan 8, 2007.

  1. #1
    How do I place an image on top of an already existing background image in the very top left of the web page, without any margins or padding?

    I can't have two background images in the same div, correct? So how do I stack the one image that i want in the top left over the background image?


    Thanks in advance
    Kyle
     
    PoohBear88, Jan 8, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Float a foreground image. Assuming the bg image is on the div element,
    
    <div>
      <img src="some.png" alt="whatever" />
      <p> whatever other text content.</p>
    </div>
    =========
    img {
        float: left;
        }
    Code (markup):
    cheers,

    gary
     
    kk5st, Jan 8, 2007 IP
  3. PoohBear88

    PoohBear88 Active Member

    Messages:
    904
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    85
    #3
    Ok I got that to work, however it moves my entire content to the right the amount of pixels the image's width is. Is there a way for the top-left image not to affect the content?

    Here's how the code looks:


    <body>
    <img class="splat" src="/videos/images/splat-corner.png" alt="Paintball Splat">
    
    <div id="wrap">
    HTML:
    img.splat {
    float: left;
    }
    
    Code (markup):
     
    PoohBear88, Jan 9, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    what? Do you want the image to overlay the other content?

    cheers,

    gary
     
    kk5st, Jan 9, 2007 IP
  5. OWL_on_NG

    OWL_on_NG Active Member

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #5
    If you change the z-index value it will go under or on top accordingly.
     
    OWL_on_NG, Jan 9, 2007 IP
  6. PoohBear88

    PoohBear88 Active Member

    Messages:
    904
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    85
    #6
    Sorry for the confusion. Here's an image of what I want is showing up...

    In IE
    http://img156.imageshack.us/my.php?image=dphelpmg0.jpg

    In Firefox
    http://img295.imageshack.us/my.php?image=dphelp2ia3.jpg

    Using this code:
    
    img.splat {
    float: left;
    }
    
    Code (markup):
    HTML:
    <body>
    <img class="splat" src="/videos/images/splat-corner.png" alt="Paintball Splat">
    
    <div id="content">
    Code (markup):

    I want the content to be centered like it should be, but the top left image on top of the background image (it's a transparent .png file).


    Can this be done so it works in all browsers?
     
    PoohBear88, Jan 9, 2007 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Then make the image a bg on the container for the text.

    cheers,

    gary
     
    kk5st, Jan 10, 2007 IP