title: Blitting a transparent .PNG image onto a screen
body: <p>Hi there I have a image with a black rectangle drawn on it, and its background is transparent. This file is saved as a png (<code>clear.png</code>). Then I have another image which is just a solid red background saved as a jpeg (<code>background.jpeg</code>). What I was trying to do is make so that the black rectangle in clear.png show up on top of the solid red background image. </p>
  
  <p>This is what I have done..</p>
  
  <pre><code>/*Transparent image*/
  #include "SDL/SDL.h"
  #include "SDL/SDL_image.h"
  #include &lt;iostream&gt;
  using namespace std;
  int main(int argc,char *argv[]){
      SDL_Surface *screen = NULL;
      SDL_Surface *background = NULL;
      SDL_Surface *transparentimage = NULL;
  
      if ( SDL_Init(SDL_INIT_EVERYTHING) == -1){
          cout &lt;&lt;"could not start sdl" &lt;&lt; endl;
      }
  
      screen = SDL_SetVideoMode(640,480,32,SDL_SWSURFACE);
      if ( screen == NULL){
          cout&lt;&lt;"could not create the screen" &lt;&lt; endl;
      }
  
      background = IMG_Load("background.jpeg");
      if ( background == NULL){
          cout&lt;&lt;"could not load background" &lt;&lt; endl;
      }
  
      transparentimage = IMG_Load("clear.png");
      if ( transparentimage == NULL){
          cout&lt;&lt; "could not load transparentimage" &lt;&lt; endl;
      }
  
      if ( SDL_BlitSurface(background,NULL,screen,NULL) == -1 ){
          cout&lt;&lt;"Couldnt do background blitting " &lt;&lt; endl;
      }
      if (SDL_BlitSurface(transparentimage,NULL,background,NULL) == -1 ){
          cout&lt;&lt;"could not do clear image blitting "&lt;&lt; endl;
      }
  
      SDL_Flip(screen);
      SDL_Delay(5000);
  
      SDL_FreeSurface(background);
      SDL_FreeSurface(transparentimage);
  
      SDL_Quit();
  
      return 0;
  }
  </code></pre>
  
  <p>The above doesn't work and it just shows me a screen with a red background and a black footer at the bottom of the screen (this isn't my rectangle :)). What have I done wrong here?. Also the size of the images are identical (640x480). </p>