following up to the previous post, i want to do a follow-up tutorial about how to change your twitter background image.
creating the background itself is pretty straight forward, although there are caveats; the biggest of which is dealing with resolution, and not the new year’s kind, the pixel kind.
the main twitter container that shows the tweets in the center of the page is a fixed size. in my layout, the style sheet defines the width of that container as 763 pixels. that container will be that width no matter what resolution of the viewer’s monitor is.
here is my new background again, as viewed on my monitor’s  resolution of 1280 by 1024:
here is the same background, this time viewed on a monitor set at a resolution of 1024 by 768:
as you can see, because that center area always takes up the fixed width of 763 pixels, there is now less real estate for my background, causing the center area to cover over part of my images on the left, and the “david monnerat photography” on the right is no longer visible.
it gets even worse on a monitor with a resolution of 800 by 600 pixels.
at this resolution, very little from the background is visible. but really, who uses that resolution anymore? (sorry, mom).
resolution problems go the other way, as well. my current display doesn’t provide a higher resolution than 1280 by 1024, but there are some wider resolutions that would cause my images to appear smaller and potentially move the “david monnerat photography” on the right side to fall under the main twitter area.
so the question becomes what resolution do you design a twitter background for? or more grammatically correct, for which resolution should one design a twitter background?
in my opinion, the most appropriate and logical choice is to select the resolution with your audience in mind. however, the people that are most likely viewing my twitter page may be different that potential clients, and i’m pretty sure this is true in my case. most of my tweets are related to photography intended for other photographers or people interested in  photography, so my twitter audience probably won’t be people looking for a photographer in my area, they are people interested in  photography. for that reason, i can eliminate the lower resolution, at least from my twitter background. in my experience, people interested in or actually doing photography have higher resolutions than the rest of the world, so i opted to design it for the 1280 by 1024 resolution. i could have gone a bit smaller, but i felt like shrinking the images any more to account for the difference reduced the quality of the images themselves or made them too small on the higher resolutions.
a side note that even though my twitter page was designed at this resolution, my website is still geared towards supporting this and lower resolution monitors, because the audience of the website is different than the audience of twitter, and i want those potential clients that have lower resolution monitors to have the best experience possible.
so you have a new background image, now what?
to apply your fancy new background image inside of twitter, go to the twitter home page and log in. click on the Settings link on the top right of the page. Then click on the Design link. This screen is where you get to control how your twitter page looks. To load the new image, click the Change background image link and select your new file. Note that the file must be in GIF, JPG, or PNG format, and must be smaller than 800K, although really, that’s kind of a big background image for folks on a slower connection. I’m not sure if twitter does anything behind the scenes to reduce the file size after you upload it, but it’s something to keep in mind.
that’s it. click Save Changes and your new background image should be visible. try viewing it at different monitor resolutions just to make sure you get the results you are expecting.
and while you are at it…
in addition to changing the background image, you can customize a number of other features inside of twitter on the same Design page. twitter allows you to change the color for the following items: background, text, links, sidebar, and sidebar border. i actually started off by clicking on the different themes they offered to find a color scheme close to what i was looking for, then just adjusted those items i wanted to change. a nifty feature is that you can change all of those items (except the background image) and it will show you what the page will look like, and the changes don’t get applied until you click Save Changes, so if you get too out of sorts, you can just click Cancel and things will revert to the way they were. that doesn’t apply to the background image, though, since you have to click Save Changes to upload the image. Â i would therefore recommend doing the color scheme first, changing the background image, or just do both separately.
hope that helps.
