Skip navigation
Currently Being Moderated

How to put an image on an image ??

Apr 23, 2013 8:41 AM

I'm pretty new to dreamweaver, my brother started the initial design of my site, and I'm putting content into it.


What I'd like to do is put a A jpeg file on top of a PNG file.


When I do that, the jpeg finds itself positioned behind the PNG so you can't actualy see it


how it looks like, im trying to put the picture on the gray surface, which is the PNG


and the code if its useful



.tipday {

          font-family: "Arial Black", Gadget, sans-serif;

          font-size: 14px;


.TIP {

          background-image: url(bg.png);


.TIP {

          color: #FFF;


.JJ {

          background-image: url(HEADER1.png);


#apDiv49 p strong {

          font-size: 16pt;

          font-family: Verdana, Geneva, sans-serif;




<script type="text/javascript">

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;


function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}




function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;




function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}



<body onLoad="MM_preloadImages('nutritionnav2.png','trainingnav2.png','vide osnav2.png','contactnav2.png','homenav2.png','interviewsnav2.png')">

<div id="apDiv34"><a href="Index.html"><img src="logofit.png" width="585" height="160" /></a></div>

<div id="apDiv33"><img src="Twitterlogo.png" width="36" height="33" /></div>

<p> </p>

<div id="apDiv22"><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','contactnav2.png',1)"><img src="contactnav1.png" name="Image9" width="95" height="45" border="0"></a></div>

<div id="apDiv14"><img src="navbar.png" width="833" height="121"></div>

<div id="apDiv15"><a href="Index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','homenav2.png',1)"><img src="homenav1.png" name="Image15" width="95" height="45" border="0" id="Image15" /></a></div>

<div id="apDiv18"><a href="training.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','trainingnav2.png',1)"><img src="trainingnav1.png" name="Image6" width="95" height="45" border="0"></a></div>

<div id="apDiv19"><a href="Nutrition.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','nutritionnav2.png',1)"><img src="nutritionnav1.png" name="Image5" width="95" height="45" border="0"></a></div>

<div id="apDiv20"><a href="Interviews.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','interviewsnav2.png',1)"><img src="Interviewsnav1.png" name="Image25" width="95" height="45" border="0"></a></div>

<div id="apDiv21"><a href="videos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','videosnav2.png',1)"><img src="videosnav1.png" name="Image8" width="95" height="45" border="0"></a></div>

<div id="apDiv24"><form method="get" action="">



<input type="text"   name="q" size="31"

maxlength="255" value="" />

<input type="submit" value="Search" />

<br />








<div id="apDiv29"><img src="Buttona.png" alt="" width="111" height="23" /></div>

<div id="apDiv32"><img src="fblogo.png" alt="blank" width="36" height="33" /></div>

<div id="apDiv35"><img src="main copy.png" width="966" height="438" /></div>

<div id="apDiv36"><img src="HEADER1.jpg" width="806" height="344" /></div>

<div id="apDiv37"><img src="LINE.png" width="761" height="6" /></div>

<div id="apDiv38"><img src="LINE.png" width="761" height="6" /></div>

<div id="apDiv40"><img src="main copy.png" width="522" height="302" /></div>

<div id="apDiv"><img src="main copy.png" width="522" height="302" /></div>

<div id="apDiv41"><img src="main copy.png" width="434" height="570" /></div>

<div id="apDiv42"><strong>(Enter Text here)</strong></div>

<div id="apDiv43"><img src="boxbody.png" width="505" height="280" /></div>

<div id="apDiv44"><img src="LINE.png" width="413" height="5" /></div>

<div id="apDiv45"><strong>(Enter Text here)</strong></div>

<div id="apDiv47"><img src="LINE.png" width="350" height="6" /></div>

<div id="apDiv48"><img src="boxbody.png" width="402" height="508" /></div>

<div id="apDiv50">

  <p>(Enter text here)      </p>


<p> </p>

<p><div style="position:absolute; left: 60px; top: 681px;"><img src="file:///C|/Users/seydi/Pictures/rsz_headertemplate6.jpg" width="250" height="100"></p></div>

<p> </p>

<div id="apDiv51"><img src="linebottom.jpg" width="1495" height="23" />

  <div id="apDiv53"><img src="copyright.png" width="531" height="32" /></div>


<p> </p>

<div id="apDiv54"><img src="main copy.png" width="492" height="258" />

  <div id="apDiv57">rffrfrfrfrffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffnmrfmrffmrmfrfmrfmrmrfm</d iv>


<div style="position:absolute"></div>

  • Currently Being Moderated
    Apr 23, 2013 9:41 AM   in reply to shay14

    First & foremost, you're using APDivs to position elements which is pure poison.  Positioning removes content from the normal document flow and creates a total mess.  You should not use positioning for primary layouts.  You don't need it.


    Best advice, start over with one of the pre-built CSS Layouts in Dreamweaver.  Go to File > New > Blank page > HTML > Layouts.  Choose one from the 3rd panel and hit Create.  See screenshot.  Use CSS margins, floats & padding to align columns and other elements on screen.


    Regarding your question, background images are achieved with the CSS background property.  Foreground images are inserted directly into the HTML code.





         #divName {background: url(your-BG-image.png) no-repeat}



         <div id="divName">

         <img src="your-FG-image.jpg" alt="some description" height="xxx"  width="xxx">




    HTML & CSS Tutorials -



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Apr 23, 2013 11:51 AM   in reply to shay14

    It's probably better to discover the cold hard truth now rather than later after the site is launched. 



    Good luck!


    Nancy O.

    Mark as:
  • Currently Being Moderated
    Apr 23, 2013 12:26 PM   in reply to shay14

    If I were an instructor, professor or teacher, I would fail a design reliant on AP divs. It's the kind of thing I would have told my students not to do.

    Mark as:
  • Currently Being Moderated
    Apr 24, 2013 7:09 AM   in reply to mhollis55

    mhollis55 wrote:


    If I were an instructor, professor or teacher, I would fail a design reliant on AP divs. It's the kind of thing I would have told my students not to do.


    I'm finding many, many, many instructors are a good 5-10 years behind in their understanding of what makes a "good design". It's really unfortunate, but most work I've seen from newly graduated students is incredibly "AP heavy".


    It's a really easy fix to show a prof how bad an idea it is though. Let them create the most asatoundingly awesome (in their minds) design they can (riddled with APDivs). Open it on in FireFox, go to View > Zoom > Zoom Text Only and then hold the Control key while spinning your mouse wheel wildly.




    ...goes their design. That's one of the best illustrations of why position:absolute should not be used except when absolutely necessary (pun intended, helps you remember they should be rare things). Once they understand that it's a terrible idea, show them some info on positioning items using floats and margins.


    Nancy O. has a great link for that.

    Mark as:
  • Currently Being Moderated
    Apr 24, 2013 2:20 PM   in reply to Jon Fritz II


    I'm finding many, many, many instructors are a good 5-10 years behind in their understanding of what makes a "good design". It's really unfortunate, but most work I've seen from newly graduated students is incredibly "AP heavy".


    My neice is in a high school "web design" class and the teacher INSISTS that all webpages MUST be built with tables. With as much emphasis as it seems everyone under the sun is placing on our kids' education these days, it's astonishing to think that this is tolerated in our classrooms. If we had math teachers showing kids how to do algebra with an abacus, there'd be an uproar.

    Mark as:
  • Currently Being Moderated
    Apr 24, 2013 2:49 PM   in reply to Mike M

    Actually, the abacus is very useful and is still used for calculations in Asia, so don't knock it.


    But I would say that your neice's teacher is keeping me in a good job. But the way to use tables and place an image over an image also does not require an AP div.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points