2 Replies Latest reply on Nov 3, 2013 8:29 AM by Nancy OShea

    Place an mp3 player on top of an image in image-based website??


      Hi everyone!


      I am trying to create a website for our company, and have made an image-based website in Photoshop. The whole background is composed of sliced images from a Photoshop file, and I want to add links, drop down menus, a photo slider, and an mp3 player with Dreamweaver. I am having a great deal of trouble as I don't know nearly as much about coding as I would like to!


      Right now I am trying to add an mp3 player to the bottom of our website, but I want it to be on top of the bar at the bottom of the page. Since the bar is technically an image, every time I paste the code for the mp3 player into the HTML, it goes above or below the bar rather than on top of it. Is there any way to remedy this?? Advice would be appreciated! Thanks

        • 1. Re: Place an mp3 player on top of an image in image-based website??
          mhollis55 Level 4

          Is there any way we can see your website? Fishing around in the dark is not a good way to give advice.


          I should also mention that the "slicing Photoshop files" method of website building is probably not the way we build websites anymore, if I understand where you are coming from.


          Generally speaking, if you have an image in the background set up in your style sheet, you should be able to put things on top of that image.


          So, let's say we have a div and I'm going to call it "player." We may want to have more than one player on a page, so we'll give it a class:




          .player {

               background-image: url("/path/myimage.jpg");




          <div class="player">


          <audio controls>

            <source src="/path/myaudio.ogg" type="audio/ogg">

            <source src="/path/myaudio.mp3" type="audio/mpeg">

          Your browser does not support the audio element.





          Now, what I have done here is to create an HTML5 Audio player. The web page with the audio must be HTML5. And you will probably need to edit your .htaccess file to include the following:


          AddType audio/ogg .oga

          AddType video/ogg .ogv

          AddType application/ogg .ogg

          AddHandler application-ogg .ogg .ogv .oga


          If you don't know how to edit an .htaccsss file, you should be able to add those MIME types in your host's Control Panel.


          The way you declare an HTML5 document is to start the document with:


          <!DOCTYPE HTML>



          This would be before you start your <head> region.


          But I must warn you, I'm offering all of this with a great deal of trepidation. I believe you're putting together a website using tables and inline code for things like backgrounds and such. Modern web design does not use tables to format web pages.


          Without looking at what you're doing, there is a very big limit as to how I can advise you.



          1 person found this helpful
          • 2. Re: Place an mp3 player on top of an image in image-based website??
            Nancy OShea Adobe Community Professional & MVP

            PS is a graphics app.  What you have now is a design comp that must be translated into a real web page with HTML & CSS code. Unfortunately, PS generated code is far too rigid and unstable for use in a real site.  That's why you're struggling to work with it.  


            Start over with one of the pre-built layouts in DW.  Go to File > New > Blank page > HTML.  Choose a layout from the 3rd panel and hit Create.


            SaveAs index.html (your web site's home page) or some other filename.html. 

            Insert images & real text into the HTML. 

            Use the CSS Design panel to style your content & apply backgrounds to divs.


            Also, work through this 5-part tutorial.

            Creating your first web site in DW -




            Nancy O.

            1 person found this helpful