4 Replies Latest reply on Nov 29, 2007 7:55 PM by pixlor

    Overlaying Photo image on multi-colour background

    Magicalwonders
      Hello,

      I hope someone can point me in the right direction with this one - as I'm a bit stuck.

      I am creating a graphic for use as a background image on a webpage that uses three colours. I want to add a picture in the top right of the page. I have removed the background from this picture using the magic want tool - but when I import it into my existing graphic, it appears within a box with a white background. You can see what I mean at this url: http://www.magicalwonders.com/background/test.html
      I'm not sure how to overlay this picture so that the graphic underneath is showing? Is there an easy way to do this?

      Hope someone can advise,

      Many thanks,

      Myles
        • 1. Re: Overlaying Photo image on multi-colour background
          pixlor Level 4
          The .jpg format doesn't support transparency. If you're trying to put a .jpg over a background, this is what you'll get.

          You could try saving the image as a .gif, which does support transparency, but it may not look good enough.

          You could also try to export as a .png, although browser support for .png transparency is not perfect. (Export to a separate file, the standard .png format is slightly different than the Fireworks .png.)
          • 2. Re: Overlaying Photo image on multi-colour background
            Level 7
            if the background is always going to be in the same place behind the
            photo then you can include that part of the background in the photo itself

            pixlor wrote:
            > The .jpg format doesn't support transparency. If you're trying to put a .jpg
            > over a background, this is what you'll get.
            >
            > You could try saving the image as a .gif, which does support
            > transparency, but it may not look good enough.
            >
            > You could also try to export as a .png, although browser support for .png
            > transparency is not perfect. (Export to a separate file, the standard .png
            > format is slightly different than the Fireworks .png.)
            >
            • 3. Overlaying Photo image on multi-colour background
              Magicalwonders Level 1
              Thanks for the advice and feedback,

              I've managed to get this sorted using photoshop. It's a bit fiddly - but is does a pretty good job. It allows you to have two graphics on screen at the same time, remove the background from one of the pics - and using a move tool, drag the cut-out onto the other graphic.

              Many thanks,

              Myles
              • 4. Re: Overlaying Photo image on multi-colour background
                pixlor Level 4
                quote:

                Originally posted by: Magicalwonders
                I've managed to get this sorted using photoshop. It's a bit fiddly - but is does a pretty good job. It allows you to have two graphics on screen at the same time, remove the background from one of the pics - and using a move tool, drag the cut-out onto the other graphic.


                Just for future reference, you can have multiple images in a Fireworks document, too. You could have done that operation in Fireworks. I thought you were trying to use the colorful image as a Web page background and put Web content over it. I'm sorry I misunderstood you.

                Glad you found a way to work it, though!