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

Dev Shed Forums Sponsor:

September 24th, 2008, 11:07 AM

CelticDaddio

Registered User

Join Date: Jul 2008

Posts: 5

Time spent in forums: 31 m 59 sec
Reputation 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

September 24th, 2008, 01:54 PM

groundscape

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Jun 2001

Location: Right now? On my chair.

Posts: 1,795

Folding Points: 700 Folding Title: Novice Folder

Time spent in forums: 1 Week 4 Days 18 h 43 m 47 sec
Warnings Level: 10
Number of bans: 1
Reputation Power: 252

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

September 24th, 2008, 06:24 PM

Arem

Classical Computing

Join Date: May 2008

Location: Melbourne, Australia

Posts: 893

Time spent in forums: 1 Week 1 Day 17 h 32 m 29 sec
Reputation Power: 101

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.

September 25th, 2008, 03:32 AM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 3,009

Time spent in forums: 1 Month 4 Days 17 h 35 m 11 sec
Reputation Power: 1223

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

__________________

September 25th, 2008, 09:25 AM

Arem

Classical Computing

Join Date: May 2008

Location: Melbourne, Australia

Posts: 893

Time spent in forums: 1 Week 1 Day 17 h 32 m 29 sec
Reputation Power: 101

Quote:

Originally Posted by Akh

You could also set the large image as background of the small.

Hmm, good idea!

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

Developer Shed Advertisers and Affiliates