|
6 | 6 | <title>
|
7 | 7 | <%= name %> / Theming / Docs / TACHYONS
|
8 | 8 | </title>
|
9 |
| - <meta name="author" content="@mr3rs"> |
10 |
| - <meta name="description" content="Documentation for setting background-size on elements with the tachyons background-size module."> |
| 9 | + <meta name="author" content="@mrmrs"> |
| 10 | + <meta name="description" content="Documentation for setting background-size on elements with the tachyons-background-size css module."> |
11 | 11 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
12 | 12 | <link rel="stylesheet" href="/css/tachyons.css">
|
13 | 13 | </head>
|
@@ -36,16 +36,21 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
|
36 | 36 | <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
|
37 | 37 | </dl>
|
38 | 38 | </div>
|
| 39 | + <p class="measure f6 f5-ns lh-copy pb4 mt0"> |
| 40 | + Background-size affects how background images fill their containing elements. |
| 41 | + While measurements can be declared explicitly to size an image, the ones that seem most reusable are |
| 42 | + setting contain or cover. |
| 43 | + </p> |
39 | 44 | </article>
|
40 | 45 | <div class="ph3 ph5-ns pt4 pb5">
|
41 |
| - <h2 class="f3 bold">Examples</h2> |
42 |
| - <h3 class="f5 book pt4 caps">Contain</h3> |
43 |
| - <p class="measure lh-copy">Contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.</p> |
| 46 | + <h2 class="f3 mb4">Examples</h2> |
| 47 | + <code class="f6 fw4 dib">.bg-cn { background-size: contain }</code> |
| 48 | + <p class="measure lh-copy mt0"><code>contain</code> will make sure that the entire image is displayed within the element, regardless of the elements dimensions.</p> |
44 | 49 | <div style="background-image: url(http://placekitten.com/g/500/500);background-repeat: no-repeat;outline: 1px solid black;" class="bg-cn h4 w-50">
|
45 | 50 |
|
46 | 51 | </div>
|
47 |
| - <h3 class="f5 book pt4 caps">Cover</h3> |
48 |
| - <p class="measure lh-copy">Cover will make sure the entire element is covered - but won't guarantee that the entire image will be shown.</p> |
| 52 | + <code class="f6 fw4 mt5 dib">.bg-cv { background-size: cover }</code> |
| 53 | + <p class="measure lh-copy mt0"><code>cover</code> will make sure the entire element is covered - but won't guarantee that the entire image will be shown.</p> |
49 | 54 | <div style="background-image: url(http://placekitten.com/g/500/500); outline: 1px solid black;" class="bg-cv h4 w-50">
|
50 | 55 |
|
51 | 56 | </div>
|
@@ -78,6 +83,5 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
|
78 | 83 | </main>
|
79 | 84 | <%= siteFooter %>
|
80 | 85 | <%= googleAnalytics %>
|
81 |
| - |
82 | 86 | </body>
|
83 | 87 | </html>
|
0 commit comments