This is pretty much the steps to take and tips for creating the template, the design is up to you!
Remember - one template won't work for ALL profile display styles, as they have different templates.
Not ALL profile display styles have a transparent top bar, so remember that when designing it.
Use the default colors for the profile display to your advantage, especially if you want to create a border.

how do you compensate for different people having different resolutions?

my screen is fuckin huge but what about the dude on his small laptop

the image will still fit on the different resolutions, but on a smaller resolution, the right side will be cut off partially if their width is smaller than the image itself.
(this is assuming you set the image settings for placement in the top left corner)
in another perspective, if you make the profile smaller than someone else who has a larger resolution, the image won't extend all the way to the right of the person's screen.
the image doesn't shrink or anything, but this is why you don't do something like put a border around the right side - which i've seen some people do.
if you put the border on the right side of the image, people with different resolutions will see that part in different areas, and i think it's unappealing.
if you don't care what other people see, and just care about what you see when you see your profile, you can go ahead and do that of course.

when placing the image in your profile, use the same profile display style that you created the image for.
Attachment: scroll
Position: top left
Repeat: no-repeat
Background Color: (use the same RGB code you used for the background color in your image)