5 Replies Latest reply on Mar 24, 2010 2:20 PM by Angelshare2

    Text over a picture.

    Angelshare2

      How do I put text over a picture?

       

      A few issues first.  I can just put the text directly on the picture and call it a day but the search engines do not recognize that when they send crawlers around.  So it needs to be text, not jpeg.

       

      Second, if I make the picture the background, I can easily type text on it.  However, the background picture either repeats, or is monsterously huge.  (I know how to turn off the repeat, but then it's just huge.)

       

      How do I do this?

       

      I've been using Dreamweaver for about three weeks now and I'm not too familiar with the software and I certainly don't understand html code, so baby steps please.

       

      Here's an example of what I'm trying to do.  http://www.theghostwriter-movie.com/  (click on cast/filmmakers)

       

      This is for a movie I'm making.  I'm not looking for a site as fancy as that one, but I'm just posting it to show what I mean with a background image with text, as opposed to the traditional tables and banner view style.

        • 1. Re: Text over a picture.
          M.R.Biesheuvel Level 3

          Well the link you gave was all Flash, that's a different technology then html. Well you've already know how to make text appear over an image so it comes down to making choices i guess,

           

           

          Meindert

          www.sportjegeestgezond.nl

          • 2. Re: Text over a picture.
            shunithD Level 3

            OK... as you're aware you have a couple of choices...

             

            1/ Put the text on the image / graphic – but you don't want to do that. However, if the reason is only SEO, then you can put the text matter as the 'alt' text and the SEO will find it.

             

            2/ Set the graphic as a background... if you disable the repeats, this should work as long as you have a way to keep the 'container' to the fixed size... Size the graphic / image properly and there's no reason why it should be 'monstrously huge'. A background graphic will retain its original size. ( Not sure, but in some browsers, zooming in or out may shrink or expand the image but it'll be in proportion to the rest of the page.)


            3/ Use absolutely positioned DIVs and give the text container a higher stacking order than the image container.

            • 3. Re: Text over a picture.
              Angelshare2 Level 1

              2/ Set the graphic as a background... if you disable the repeats, this should work as long as you have a way to keep the 'container' to the fixed size... Size the graphic / image properly and there's no reason why it should be 'monstrously huge'. A background graphic will retain its original size. ( Not sure, but in some browsers, zooming in or out may shrink or expand the image but it'll be in proportion to the rest of the page.)

               

              What is a container?  Is that the box I insert through insert ->column?  Is there a way to resize the container so the background is the same size on all browsers?  (I'll try resizing the picture.)

              • 4. Re: Text over a picture.
                shunithD Level 3

                Angelshare2 wrote:

                 

                 

                What is a container?  Is that the box I insert through insert ->column?  Is there a way to resize the container so the background is the same size on all browsers?  (I'll try resizing the picture.)

                A container is a DIV or a Table...

                 

                If your background image is say, 500px x 300px, it'll display at that size in all browsers, provided the container is the same size...

                 

                For a DIV, you can set the width. The height will depend on content. (You can create a 1px wide x Xpx high transparent gif and insert it with a left or right align to keep the DIV to that height.)

                 

                For a table, you can create a column of the full height and use a transparent .gif.

                • 5. Re: Text over a picture.
                  Angelshare2 Level 1

                  I kind of assumed that the jpgs would resize themselves.  I resized them in my photoshop program and now it looks pretty good.  I think usuing them as background is the best choice for me.  Thanks for the responses guys.