Here’s a screenshot of my Twitter home page with the background image from jackrebel.com and a transparent background for the center of the page that we create with some custom CSS injected into the twitter page on the fly using Stylish. We also have to adjust a lot of the colors of various bits to work with a dark background. The sidebar has a hover effect. You can tune the opacity to your liking by changing the opacity numbers for the various elements, but bear in mind the text is made transparent also so too little opacity can be hard to read (click to enlarge):

You can upload images to use as the background using the Twitter Settings/Design option in the page header. You can also choose solid background colors for the twitter content (tweets) and sidebar sections – choose colors that are similar to your background image for the best effect and choose a contrasting text color – most likely either black or white. You want the text to be readable against the background image.

Then you will need to install the Stylish add-on. It will ask to restart Firefox which you should do – it reloads any tabs you have open. Then install the Transparent Twitter Styles from Userstyles.org. There should be an install button for Firefox in the top right corner of that page, as well as ways to install in Chrome and Opera. There are also style tweaks for many other web sites available on their Site Styles page. Now reload the Twitter page and you should see a partially transparent background. The effect can be tweaked to your liking by modifying the CSS it uses. Right click on the Stylish S icon in the bottom right corner of the Firefox window and select Manage Styles…

This pops up the addon editor dialog with the Stylish User Styles option selected. Select the Transparent twitter style from the list and click on the edit button…

to show the CSS that is injected into the twitter page to create the transparent effect. This is the standard code that works for most sites with a photo background and solid color message area and sidebar.

You can change the CSS, either to adjust the opacities for the best effect with your background image and colors, or even make the twitter content and sidebar disappear completely unless you mouse over them. The CSS in the following dialog is what I used to create the first screenshot above. It uses a transparent background for the message area since my background is a color wash without any fine detail.

Here is the CSS from the above screenshot:

/* code by shao */
/* modified by JackRebel.com for light text on a dark blue background image */

textarea#status {color: #FFFFFF !important}
.top-navigation {background-color: transparent !important}
.bar h3 label, #currently, #latest_status, #latest_text, h1#heading {color:#FFFFFF !important}
ol.statuses li:hover{color:#333366 !important}
#content{background-color:transparent !important;color:#FFFFFF !important;opacity:0.9 !important}
#status{background-color:transparent !important}
#side_base{opacity:0.6 !important}
#side_base:hover{opacity:0.9 !important}
}


Here’s a Firefox Persona with Yosemite’s Half Dome (click to enlarge):

Type: Firefox Themes, Firefox Extensions | Mozilla Firefox: Persona Add-on, Persona Gallery