Layered Background Images PNG's

Background image, than Rainbow.PNG, than ArtworkMenu.png

Page 1 of 1

4 Replies - 2621 Views - Last Post: 30 August 2010 - 12:55 PM

#1 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 311
  • Joined: 10-July 07

Layered Background Images PNG's

Posted 27 August 2010 - 08:35 AM

Hi,

I'm trying to get 2 layers(.PNG's), centered, over a background image. (So that the MissionNormal.png and the Rainbow stay in position centered.)

The 2 layers need to be transparent.

I've tried it two different ways.
1- Rainbow Centered, but cut, in a table.
 2- Centered but doesn't Stay in Position Because the rainbow is in the background.jpg image.

Can anyone help me figure out how to get these to stay centered and in the middle position?

Is there a way to z-index 2 background images and make them centered?

Thanks in advance,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.centerDeka {
	text-align: center;
}
body {
	background-image: url(images/background.png);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>
<body class="centerDeka">
<img src="images/Mission-Normal.png" width="1024" height="768" />
</body>
</html>

Attached File(s)


This post has been edited by bmcc81: 27 August 2010 - 08:37 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Layered Background Images PNG's

#2 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2503
  • View blog
  • Posts: 8,564
  • Joined: 08-August 08

Re: Layered Background Images PNG's

Posted 27 August 2010 - 11:55 AM

You could wrap them each in a div and center that. Then it's just a matter of giving the divs different z-indexes.
Was This Post Helpful? 0
  • +
  • -

#3 Lemur  Icon User is online

  • OpenBSD Head
  • member icon


Reputation: 1120
  • View blog
  • Posts: 3,073
  • Joined: 28-November 09

Re: Layered Background Images PNG's

Posted 27 August 2010 - 11:55 AM

My best guess of an idea would be to have an html background attribute set and then set a container to the full width inside of that with the next image in a <div>. Should work out, tell me if it works.

EDIT - Crap, CTphpnwb got the jump on me...

This post has been edited by Lemur: 27 August 2010 - 11:57 AM

Was This Post Helpful? 0
  • +
  • -

#4 suniahk  Icon User is offline

  • New D.I.C Head

Reputation: 6
  • View blog
  • Posts: 27
  • Joined: 22-May 10

Re: Layered Background Images PNG's

Posted 30 August 2010 - 12:49 PM

I'm kinda confused about what you're trying to do, but if I understand the gist of it correctly, you can specify where the background image is displayed using the background-position CSS property. For what you want, background-position: center top; would be the line to use.

More information on background-position: http://www.w3schools...nd-position.asp
Was This Post Helpful? 0
  • +
  • -

#5 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Layered Background Images PNG's

Posted 30 August 2010 - 12:55 PM

Looking at the size and layout of the background image I think suniahk has got what you mean right.

replace
background-image: url(images/background.png);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;


with
background: url(images/background.png) no-repeat 50% 0;
margin:0;

This post has been edited by PhunkRabbit: 30 August 2010 - 12:55 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1