Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+66 −59
Open

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 66 additions & 59 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>