#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2008
    Posts
    5
    Rep Power
    0

    Is it possible to use CSS to place one image over the top of the other?


    Is it possible to use CSS to place one image over the top of the other? For what I mean go here:

    celticblues dot com/test/test.html

    I could do the same thing via photoshop, but I want to do it with CSS as I have several to do and I am not sure of the relative sizes yet and don't want to keep redoing the photoshop thing.

    Ed
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,795
    Rep Power
    254
    Give the small image a position:relative; a z-index:20; and then use the offset properties to move it on top of the image. The offset properties are
    top:
    bottom:
    right:
    left:

    Cheers.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  4. #3
  5. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    893
    Rep Power
    102
    Another option is to have one div inside another. Set the large photo as the background image of the container div, and the small photo either as a background image of the inner div or as a regular image in the html.
    Simple is beautiful.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    You could also set the large image as background of the small.

    Code:
    css:
    img {
    	background:url(file1.jpg) center no-repeat;
    	padding:145px 264px;
    }
    
    html:
    <img src="file2.jpg" alt="fail" />
    You need to make sure IE is in standard mode, or else it would fail.
    http://quirksmode.org/css/quirksmode.html
  8. #5
  9. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    893
    Rep Power
    102
    Originally Posted by Akh
    You could also set the large image as background of the small.
    Hmm, good idea!
    Simple is beautiful.

IMN logo majestic logo threadwatch logo seochat tools logo