Team:Nevada/flexi-background.css.UniversityofNevada

From 2014.igem.org

Revision as of 22:05, 17 July 2014 by Mhawn999 (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/* File Overview: Flexi-background styles. Author: Michael Bester <http://kimili.com> Description: Sets up styling for full-screen flexible backgrounds. See <http://kimili.com/journal/flexible-scalable-background-image> for more info.

/

body { background-attachment: fixed; background-position: top center; background-repeat: no-repeat;

margin: 0; padding: 0;

background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; }

/* This next definition doesn't allow the background to get any smaller than a predefined size (640x426px in this case). Change the values here to match your background image size. The configuration in the flexi-background javascript file should also match these values.

/

@media only all and (max-width: 640px) and (max-height: 426px) { body { background-size: 640px 426px; -moz-background-size: 640px 426px; -webkit-background-size: 640px 426px; } }

/* The next 2 definitions are for support in iOS devices.

	Since they don't recoginze the 'cover' keyword for background-size
	we need to simulate it with percentages and orientation

/

@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) { body { -webkit-background-size: auto 100%; } }

@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) { body { -webkit-background-size: 100% auto; } } /* All of the following styles only get used when background-size isn't supported */

img#expando { display: none; position: absolute; z-index: 1;

-ms-interpolation-mode: bicubic; }

.wide img#expando, .tall img#expando { display: block; }

.wide img#expando { height: auto; width: 100%; }

.tall img#expando { height: 100%; width: auto; }