9 Replies Latest reply on Oct 11, 2006 6:30 PM by

    Placing text over a background image?

    wtango1
      I'm rather new to Dreamweaver...... and I was wondering how I would go about placing text over an image?

      The background of my website is a large image that's sliced and takes up almost the whole page. I left a blank space on that background image so I could type live text over it. How do I type text over the top of the background image in Dreamweaver? Seems like there should be a "layers" option, so I could place a table over the top of an image. Is there a way to do this?

      Let me know if you need to see the page to understand what I'm saying and I'll post the url.
        • 1. Re: Placing text over a background image?
          Level 7
          Doing it the way you explain below, just won't work cross browser, also what
          happens to the alignment of the image and the text when someone increase the
          text size in the browser?? a blow up of your design I'm afraid.

          Maybe if we saw the image you are trying to use, someone can come up with
          other possible suggestions for you.

          --
          Nadia
          Adobe® Community Expert : Dreamweaver
          Skype: nadiaperre
          -------------------------------------------------
          Tutorials |SEO |Templates
          http://www.DreamweaverResources.com
          http://www.csstemplates.com.au
          -------------------------------------------------
          http://www.adobe.com/devnet/dreamweaver/css.html
          CSS Tutorials for Dreamweaver
          -------------------------------------------------


          "wtango1" <webforumsuser@macromedia.com> wrote in message
          news:eghj0j$lhl$1@forums.macromedia.com...
          > I'm rather new to Dreamweaver...... and I was wondering how I would go
          > about
          > placing text over an image?
          >
          > The background of my website is a large image that's sliced and takes up
          > almost the whole page. I left a blank space on that background image so I
          > could
          > type live text over it. How do I type text over the top of the background
          > image
          > in Dreamweaver? Seems like there should be a "layers" option, so I could
          > place
          > a table over the top of an image. Is there a way to do this?
          >
          > Let me know if you need to see the page to understand what I'm saying and
          > I'll
          > post the url.
          >


          • 2. Placing text over a background image?
            wtango1 Level 1
            Thanks.

            I've pasted the link to my website below. When you look at it you will see that the entire page is a sliced image that I created in Illustrator (including text). None of the text is "live".

            So, I want to delete the gray "body text" from the image and then type it all in Dreamweaver, so it's live. It's the text that begins with "experience. innovation. creativity." and the 3 paragraphs below it.

            Any suggestions? I know this isn't a crazy question....I see sites all the time with live text over background art....don't I?

            http://www.latitudetransport.com
            • 3. Re: Placing text over a background image?

              Slice the image and make site by using the sliced images. Otherwise you can use CSS for making this image as background. Also you can put layer over image and can type on the layer.

              http://www.uploading.com/files/OICXRFI4/placing_text_over_image.zip.html

              go through these files. I hope this will help you
              • 4. Re: Placing text over a background image?
                Level 7
                "thozhayan" <praveenv.vijayan@gmail.com> wrote in message
                news:egi9s5$gm7$1@forums.macromedia.com...

                Otherwise you can use CSS for making this image as background. Also you
                can put layer over image
                : and can type on the layer.


                That's not the correct way to do it - using a layer over the top,
                particularly if you mean layer as in Absolutely positioned div.


                --
                Nadia
                Adobe® Community Expert : Dreamweaver
                Skype: nadiaperre

                Tutorials |SEO |Templates
                http://www.DreamweaverResources.com
                -----------------------------------------------
                http://www.adobe.com/devnet/dreamweaver/css.html
                CSS Tutorials for Dreamweaver
                -------------------------------------------------


                • 5. Re: Placing text over a background image?
                  Level 7
                  That should be quite easy to do with either a table or css layout.... are
                  you comfortable with tables or css.

                  I would slice up the image, so that you had a header (the top rounded
                  header/logo area),
                  A middle content area -
                  and then the footer area.

                  It shouldn't be that difficult to set that all up using styled div.
                  A header div, a content div, an information div and a footer div.
                  You would use some of the slices as background images via your stylesheet.

                  If you don't understand what I've written above, then I strongly suggest
                  that you do a few CSS tutorials before proceeding any further It really is
                  not that difficult a design to convert to html.

                  I suggest that you do a few of the beginner CSS tutorials at the Adobe site,
                  starting here:
                  http://www.adobe.com/devnet/dreamweaver/css.html

                  Once you understand how to use slices and how to style the divs, things will
                  become much clearer in your mind on how to proceed.

                  Good Luck


                  --
                  Nadia
                  Adobe® Community Expert : Dreamweaver
                  Skype: nadiaperre
                  -----
                  Tutorials |SEO |Templates
                  http://www.DreamweaverResources.com
                  -------------------------------------------------
                  http://www.adobe.com/devnet/dreamweaver/css.html
                  CSS Tutorials for Dreamweaver
                  -------------------------------------------------


                  "wtango1" <webforumsuser@macromedia.com> wrote in message
                  news:egho9o$qn0$1@forums.macromedia.com...
                  : Thanks.
                  :
                  : I've pasted the link to my website below. When you look at it you will see
                  : that the entire page is a sliced image that I created in Illustrator
                  (including
                  : text). None of the text is "live".
                  :
                  : So, I want to delete the gray body text from the image and then type it
                  all in
                  : Dreamweaver so it's live. It's the text that begins with "experience.
                  : innovation. creativity." and has the 3 paragraphs below it.
                  :
                  : Any suggestions?
                  :
                  : http://www.latitudetransport.com/
                  :


                  • 6. Re: Placing text over a background image?
                    PixelPerfectStudio
                    Just a quick question to your question. Why is the text in your image part of the image? I see only three areas where the page needs an image:

                    Header
                    Left center
                    footer

                    The rest of the text can be put in a table. If you do your tables correctly you can place your text where you need it.
                    • 7. Placing text over a background image?
                      wtango1 Level 1
                      The whole page (including the text) is an image because I'm just starting to learn Dreamweaver and needed my site up quickly.

                      Since I'm very experienced in Illustrator and Photoshop, I built the entire thing in those programs and just plopped the image into Dreamweaver. It was an easy way to avoid all the stuff I don't know how to do. :)

                      But now that I have time, I'd like to correct my shortcuts and create the site the "proper" way. Thanks!
                      • 8. Re: Placing text over a background image?
                        wtango1 Level 1
                        quote:

                        Originally posted by: Newsgroup User
                        That should be quite easy to do with either a table or css layout.... are
                        you comfortable with tables or css.

                        I would slice up the image, so that you had a header (the top rounded
                        header/logo area),
                        A middle content area -
                        and then the footer area.

                        It shouldn't be that difficult to set that all up using styled div.
                        A header div, a content div, an information div and a footer div.
                        You would use some of the slices as background images via your stylesheet.

                        If you don't understand what I've written above, then I strongly suggest
                        that you do a few CSS tutorials before proceeding any further It really is
                        not that difficult a design to convert to html.

                        I suggest that you do a few of the beginner CSS tutorials at the Adobe site,
                        starting here:
                        http://www.adobe.com/devnet/dreamweaver/css.html

                        Once you understand how to use slices and how to style the divs, things will
                        become much clearer in your mind on how to proceed.

                        Good Luck
                        -
                        Nadia
                        Adobe® Community Expert : Dreamweaver
                        Skype: nadiaperre
                        -----




                        Thanks a lot!
                        • 9. Re: Placing text over a background image?
                          Thanks