7 Replies Latest reply: Apr 24, 2013 2:49 PM by mhollis55 RSS

    How to put an image on an image ??

    shay14 Community Member

      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

       

      http://i.imgur.com/DAjOls8.jpg

       

      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;

      }

      </style>

      </script>

      <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];}

      }

      </script>

      <body onLoad="MM_preloadImages('nutritionnav2.png','trainingnav2.png','videosnav2.png','contact nav2.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="http://www.google.com/search">

       

       

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

      maxlength="255" value="" />

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

      <br />

       

       

       

       

      </script>

      </form>

      </div>

      <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>

      </div>

      <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>

      </div>

      <p> </p>

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

        <div id="apDiv57">rffrfrfrfrffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffnmrfmrffmrmfrfmrfmrmrfm</div>

      </div>

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

        • 1. Re: How to put an image on an image ??
          Nancy O. MVP

          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.

           

          EXAMPLE:

           

          CSS:

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

           

          HTML:

               <div id="divName">

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

               </div>

           

           

          HTML & CSS Tutorials -

           

           

          Nancy O.

          • 2. Re: How to put an image on an image ??
            shay14 Community Member

            thanks , so i should start all over again with the design ?

             

            this is not really an option, as its a project which is to be handed in soon, and i have limited tie

            • 3. Re: How to put an image on an image ??
              Nancy O. MVP

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

               

               

              Good luck!

               

              Nancy O.

              • 4. Re: How to put an image on an image ??
                mhollis55 Community Member

                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.

                • 5. Re: How to put an image on an image ??
                  Jon Fritz II MVP

                  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.

                   

                  KAH-BOOOOOM!

                   

                  ...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.

                  • 6. Re: How to put an image on an image ??
                    Mike M Community Member

                     

                    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.

                    • 7. Re: How to put an image on an image ??
                      mhollis55 Community Member

                      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.