this changes profile background colors to be dark, and sets up the groundwork for uploading user-selected background images for their profiles. all the styling is in place; what remains is creating a new image uploader and (possibly) a new controller action.

for information on what command to use to darken the background image that's uploaded, see line 11 in `_profile.scss`.  the current image tests in the public folder are results of the convert command noted.

app/assets/javascripts/app/pages/profile.js

@@ -2,7 +2,8 @@
 //= require ../views/profile_info_view
 
 app.pages.Profile = app.views.Base.extend({
-  className : "container",
+
+  id : "profile",
 
   templateName : "profile",
 

app/assets/stylesheets/new_styles/_base.scss

@@ -1,3 +1,7 @@
+body {
+  background-image : image_url("pattern.png");
+}
+
 /* new link color */
 a { color : rgb(42,156,235)  }
 

app/assets/stylesheets/new_styles/_canvas.scss

@@ -1,15 +1,9 @@
-
 @mixin wide() {
   width : $two-column-width + px;
   min-width : $two-column-width + px;
   max-width : $two-column-width + px;
 }
 
-body {
-  background-color : #F6F6F6;
-  background-image : image_url('pattern.png')
-}
-
 .canvas-frame {
   float : left;
   margin : 10px;
@@ -28,7 +22,7 @@ body {
 
   .content {
     @include transition(box-shadow);
-    @include box-shadow(0,1px,3px,rgba(0,0,0,0.2));
+    @include box-shadow(0,1px,10px,rgba(0,0,0,0.9));
 
     background-image : image_url("paper-texture-1.jpg");
 

app/assets/stylesheets/new_styles/_profile.scss

@@ -1,3 +1,25 @@
+#profile {
+  color : #fff;
+  background : {
+    color : #333;
+
+    /* The background-image property will be user-generated and set in `app.pages.Profile` (app/assets/javascripts/app/pages/profile.js)
+       and should ONLY be set once the image is fully loaded.
+
+       Optimal imagemagick manipulation settings for uploaded image (via trial & error):
+
+       `convert -brightness-contrast -40x-50`
+
+       NOTE: I noticed that just turning the brightness down had an adverse affect on contrast,
+       thus the "washing out" at -50 contrast.  For more info on this specific command, read the documentation
+       on it here: http://www.imagemagick.org/script/command-line-options.php#brightness-contrast */
+    image : url('/imagetest.jpg');
+
+    size : cover;
+    attachment : fixed;
+  }
+}
+
 /* getting started pulse animation */
 #composer-button.pulse {
   -webkit-animation: opacity-pulse 1s infinite;

app/assets/templates/profile-info.jst.hbs

@@ -8,7 +8,7 @@
         {{#if location}}
             <span class="stat">
                 <a href="http://maps.google.com/maps?q={{location}}" target="_blank">
-                    <i class="icon-map-marker"></i>
+                    <i class="icon-map-marker icon-white"></i>
                 </a>
                 {{location}}
             </span>
@@ -17,7 +17,7 @@
 
         {{#if birthday}}
             <span class="stat">
-                <img src='{{imageUrl "buttons/bday@2x.png"}}' class="cake" />
+                <img src='{{imageUrl "buttons/bday@2x-white.png"}}' class="cake" />
                 {{birthday}}
             </span>
             <span class="divider">•</span>
@@ -25,20 +25,20 @@
 
         <span class="stat services">
             <a href="https://facebook.com" class="service" target="_blank">
-                <img src='{{imageUrl "buttons/service-icons/fb@2x.png"}}' />
+                <img src='{{imageUrl "buttons/service-icons/fb@2x-white.png"}}' />
             </a>
             <a href="https://twitter.com" class="service" target="_blank">
-                <img src='{{imageUrl "buttons/service-icons/twitter@2x.png"}}' />
+                <img src='{{imageUrl "buttons/service-icons/twitter@2x-white.png"}}' />
             </a>
             <a href="https://tumblr.com" class="service" target="_blank">
-                <img src='{{imageUrl "buttons/service-icons/tumblr@2x.png"}}' />
+                <img src='{{imageUrl "buttons/service-icons/tumblr@2x-white.png"}}' />
             </a>
         </span>
 
         {{#if isOwnProfile}}
             <span class="divider">•</span>
             <a href="/profile/edit" title="Edit Profile" rel="tooltip" style="margin-left:2px;">
-                <i class="icon-cog"></i>
+                <i class="icon-cog icon-white"></i>
             </a>
         {{/if}}
     </div>

app/assets/templates/profile.jst.hbs

@@ -1,4 +1,5 @@
-<div id="top-right-nav">
+<div class="container">
+    <div id="top-right-nav">
         {{#if showFollowButton}}
             <a href="#" onClick="alert('Not yet implemented!')" id="follow-button">
                 <span class="label label-inverse">
@@ -36,15 +37,15 @@
                 </span>
             </a>
         {{/if}}
-</div>
+    </div>
 
-<section id="profile-info"/>
+    <section id="profile-info"/>
 
-<div id="composer" style="display:none;">
+    <div id="composer" style="display:none;">
         <iframe src="/posts/new" height=500 width=700 style="border:none;"></iframe>
-</div>
+    </div>
 
-<section id="profile-controls">
+    <section id="profile-controls">
         {{#if isOwnProfile}}
             <a href="#composer" id="composer-button" class="control small" rel="facebox">
                 <img src='{{imageUrl "buttons/pub@2x.png"}}' title="New Post" rel="tooltip"/>
@@ -53,8 +54,9 @@
                 <img src='{{imageUrl "buttons/edit@2x.png"}}' title="Edit Posts" rel="tooltip"/>
             </a>
         {{/if}}
-</section>
+    </section>
 
-<section id="canvas"></section>
+    <section id="canvas"></section>
 
-<div id="paginate"><span class="loader hidden"/></div>
+    <div id="paginate"><span class="loader hidden"/></div>
+</div>