Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Graceful improvement, using CSS rule to identify background image. #10

Open
wants to merge 1 commit into from

1 participant

Luke Stevenson
Luke Stevenson

Allowing for graceful improvement, the JS now gets the image URL from
the CSS rule for the '

' tag, cleans it up, and uses it.
Also, the screen width threshold for no longer doing the backstretch has
been turned into a variable allow for it to be more easily tweaked.
Luke Stevenson lucanos Modified CSS & JS to use 'body' background image
Allowing for graceful improvement, the JS now gets the image URL from
the CSS rule for the '<body>' tag, cleans it up, and uses it.
Also, the screen width threshold for no longer doing the backstretch has
been turned into a variable allow for it to be more easily tweaked.
97ac82e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 17, 2012
  1. Luke Stevenson

    Modified CSS & JS to use 'body' background image

    lucanos authored
    Allowing for graceful improvement, the JS now gets the image URL from
    the CSS rule for the '<body>' tag, cleans it up, and uses it.
    Also, the screen width threshold for no longer doing the backstretch has
    been turned into a variable allow for it to be more easily tweaked.
This page is out of date. Refresh to see the latest.
Showing with 66 additions and 59 deletions.
  1. +66 −59 index.html
125 index.html
View
@@ -1,60 +1,67 @@
-<!doctype html>
-<html>
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>N.H.</title>
- <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
- <meta http-equiv="pragma" content="no-cache" />
- <meta name="robots" content="all" />
- <meta name="MSSmartTagsPreventParsing" content="true" />
- <meta http-equiv="imagetoolbar" content="false" />
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <!--[if lt IE 9]>
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <style>
- * { padding: 0; margin: 0; }
- body { background-color: #333; }
- p { color: #fff; font-family: Helvetica; font-size: 16px; line-height: 24px; margin-bottom: 22px; -webkit-font-smoothing: antialiased; }
- a { color: #fff; font-weight: bold; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
- a:hover { color: #990000; border-bottom: 1px solid rgba(255,255,255,1); }
- #monogram { width: 50px; padding: 50px 0 0 0; margin: 0 auto 0 50px; }
- #about { width: 360px; padding: 0 0 0 150px; margin: -35px 50px 0 auto !important; }
- @media (max-width: 767px) {
- #monogram { position: relative; width: auto; padding: 20px; margin: 0; }
- #about { position: relative; width: auto; padding: 20px; margin: 0 !important; }
- background-image { opacity: 0.2; }
- }
- </style>
-</head>
-
-<body>
-
-<!-- swap out for a logo -->
-<div id="monogram">
- <img src="monogram.png" />
-</div>
-
-<!-- swap out for information about yourself -->
-<div id="about">
- <p>Naz Hamid is the founder and principal of <a href="http://weightshift.com">Weightshift</a>, a design studio in San Francisco and Chicago. Aside from client work, projects include the community-oriented site <a href="http://interhoods.org">Interhoods</a> and mobile web application, <a href="http://sitby.us">SitBy.Us</a>. The two projects codenamed <em>Suplex</em> and <em>Sleeperhold</em> are aiming to be launched in 2011.</p>
- <p>He writes about design and tangential topics at <a href="http://weightshift.com/memo">Memo</a>, writes in 140 characters at <a href="http://twitter.com/weightshift">Twitter</a>, posts photos to <a href="http://flickr.com/absenter"/>Flickr</a>, creates 400x300px works-in-progress on <a href="http://dribbble.com/weightshift">Dribbble</a>, sometimes makes moving pictures on <a href="http://vimeo.com/weightshift">Vimeo</a>, records items of interest at <a href="http://svpply.com/weightshift">Svpply</a>, listens to all his music on <a href="http://www.rdio.com/people/weightshift/">Rdio</a> and answers the occasional question on <a href="http://www.quora.com/Naz-Hamid">Quora</a>. He also makes music as <a href="http://murdersandmysteries.com">Murders & Mysteries</a> and released an album in 2010.</p>
- <p>A <a href="http://en.wikipedia.org/wiki/Third_culture_kid">third-culture kid</a>, Naz has lived on three continents and in three countries. He currently lives in San Francisco, California, a place where he feels comfortable in his own skin.</p>
-</div>
-
-<!--include jquery & backstretch-->
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-<script type="text/javascript" src="jquery.backstretch.min.js"></script>
-<script type="text/javascript">
-$(function(){
- $(window).resize(function(){
- if($(this).width() >= 767){
- $.backstretch("nh_bg.jpg", {speed: 150});
- }
- })
- .resize();//trigger resize on page load
-});
-</script>
-
-</body>
+<!doctype html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>N.H.</title>
+ <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
+ <meta http-equiv="pragma" content="no-cache" />
+ <meta name="robots" content="all" />
+ <meta name="MSSmartTagsPreventParsing" content="true" />
+ <meta http-equiv="imagetoolbar" content="false" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <!--[if lt IE 9]>
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+ <style>
+ * { padding: 0; margin: 0; }
+ body { background-color: #333; background-image: url(nh_bg.jpg); }
+ p { color: #fff; font-family: Helvetica; font-size: 16px; line-height: 24px; margin-bottom: 22px; -webkit-font-smoothing: antialiased; }
+ a { color: #fff; font-weight: bold; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
+ a:hover { color: #990000; border-bottom: 1px solid rgba(255,255,255,1); }
+ #monogram { width: 50px; padding: 50px 0 0 0; margin: 0 auto 0 50px; }
+ #about { width: 360px; padding: 0 0 0 150px; margin: -35px 50px 0 auto !important; }
+ @media (max-width: 767px) {
+ #monogram { position: relative; width: auto; padding: 20px; margin: 0; }
+ #about { position: relative; width: auto; padding: 20px; margin: 0 !important; }
+ background-image { opacity: 0.2; }
+ }
+ </style>
+</head>
+
+<body>
+
+<!-- swap out for a logo -->
+<div id="monogram">
+ <img src="monogram.png" />
+</div>
+
+<!-- swap out for information about yourself -->
+<div id="about">
+ <p>Naz Hamid is the founder and principal of <a href="http://weightshift.com">Weightshift</a>, a design studio in San Francisco and Chicago. Aside from client work, projects include the community-oriented site <a href="http://interhoods.org">Interhoods</a> and mobile web application, <a href="http://sitby.us">SitBy.Us</a>. The two projects codenamed <em>Suplex</em> and <em>Sleeperhold</em> are aiming to be launched in 2011.</p>
+ <p>He writes about design and tangential topics at <a href="http://weightshift.com/memo">Memo</a>, writes in 140 characters at <a href="http://twitter.com/weightshift">Twitter</a>, posts photos to <a href="http://flickr.com/absenter"/>Flickr</a>, creates 400x300px works-in-progress on <a href="http://dribbble.com/weightshift">Dribbble</a>, sometimes makes moving pictures on <a href="http://vimeo.com/weightshift">Vimeo</a>, records items of interest at <a href="http://svpply.com/weightshift">Svpply</a>, listens to all his music on <a href="http://www.rdio.com/people/weightshift/">Rdio</a> and answers the occasional question on <a href="http://www.quora.com/Naz-Hamid">Quora</a>. He also makes music as <a href="http://murdersandmysteries.com">Murders & Mysteries</a> and released an album in 2010.</p>
+ <p>A <a href="http://en.wikipedia.org/wiki/Third_culture_kid">third-culture kid</a>, Naz has lived on three continents and in three countries. He currently lives in San Francisco, California, a place where he feels comfortable in his own skin.</p>
+</div>
+
+<!--include jquery & backstretch-->
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script type="text/javascript" src="jquery.backstretch.min.js"></script>
+<script type="text/javascript">
+var minScreenWidth = 767,
+ bgImg;
+$(function(){
+
+ bgImg = $('body').css('background-image').replace(/url\((.+)\)/,'$1');
+ $('body').css('background-image','');
+
+ $(window).resize(function(){
+ if($(this).width() >= minScreenWidth){
+ $.backstretch(bgImg, {speed: 150});
+ }
+ })
+ .resize();//trigger resize on page load
+
+});
+</script>
+
+</body>
</html>
Something went wrong with that request. Please try again.