In regard to the background question, I’m assuming you mean the faint overlapping designs behind the contents in the header. This can be achieved by placing designs of your choice (such as the logo in the example you provided) on separate layers and assiging various opacities to each layer in photoshop (check the layers tab for the opacity modifier).
As far as making professional sites go: it’s a pretty general question. I could only suggest practicing and learning from experience. Or go to a reputable design school.