Skip to main content
S
susansgarden
Participating Frequently
July 24, 2017
Answered

How to add white background to a graphic image?

  • July 24, 2017
  • 3 replies
  • 22976 views

Hi everyone. My website recently won an award (yay) and I received a png image to add to my home page image to advertise that. I would like to place it on top of the home page image but the png image they sent me is my problem: It's a gray graphic with the "checkerboard" background underneath it. I would like to change the background area of the graphic to white, while retaining the wording of the award in gray (or maybe black)  for the foreground. I've read help files, watched videos, but can't seem to just affect the background areas of the png image without "losing" the wording of the award. Can someone please help me figure this out? My website is SusansintheGarden.com. I have no problem editing my photos in PS but am stuck on this graphic problem. Thanks very much. (feeling like a dummy!)

    This topic has been closed for replies.
    Correct answer Silkrooster

    It was not clear if you were seeing the checkboard in your browser or in photoshop. In photoshop, that checkboard tells you that the background is transparent, which mean you can overlay it on top of a white background.

    In photoshop create a layer and fill it with white then move that layer below your image layer.

    The quick and dirty way is to just save as a jpg. Since jpg does not support a transparency background, the background will be white.

    Just don't delete the png, in case you want to have a different background at a later time, it will be easier to do.

    3 replies

    S
    susansgardenAuthor
    Participating Frequently
    July 24, 2017

    Thank you so much, Silkrooster! That was almost too easy although I obviously need to learn more about creating and editing layers. Thank you, everyone for taking the time to reply.

      michelew83603738
      Community Expert
      michelew83603738Community Expert
      Community Expert
      July 24, 2017

      If the layer is a background layer, click the lock, add a new layer and drag it to the bottom or use the shortcut Cmd+[ and then fill that layer with white and save as a jpg. It should work unless something else is going on, in which case post a screenshot of the image and layers panel.

      Trevor.Dennis
      Community Expert
      Trevor.DennisCommunity Expert
      Community Expert
      July 24, 2017

      michelew83603738  wrote

      If the layer is a background layer, click the lock, add a new layer and drag it to the bottom or use the shortcut Cmd+[ and then fill that layer with white and save as a jpg. It should work unless something else is going on, in which case post a screenshot of the image and layers panel.

      Michele you are confusing things with that post.  Silkrooster has explained that the PNG already has a transparent background, and can be added to the website as it is. 

      Another clue with PNG files with transparency is that if you grab one from the web with a screen grabber, and paste into Photoshop, the background becomes black.  If you right click and save the same file, and then open in Photoshop, it will have the transparency.  The same thing happens if you open a transparent PNG with something like Windows Image Viewer — the background becomes black.  Open that same file in a web browser (they all support transparent PNG files) and you'll see it against a white background.

      Silkrooster
      Silkrooster
      Legend
      July 25, 2017

      Had the image only a single background layer, then it would have been relevant. But you are correct when the background is transparent, that step is not needed.

      Silkrooster
      SilkroosterCorrect answer
      Legend
      July 24, 2017

      It was not clear if you were seeing the checkboard in your browser or in photoshop. In photoshop, that checkboard tells you that the background is transparent, which mean you can overlay it on top of a white background.

      In photoshop create a layer and fill it with white then move that layer below your image layer.

      The quick and dirty way is to just save as a jpg. Since jpg does not support a transparency background, the background will be white.

      Just don't delete the png, in case you want to have a different background at a later time, it will be easier to do.

      S
      susansgardenAuthor
      Participating Frequently
      July 24, 2017

      Thank you. I was seeing the checkered background in PS. Your answer was very helpful for future layer issues.

        Silkrooster
        Silkrooster
        Legend
        July 25, 2017

        You're welcome

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices