css-reference/property/background-size/index.html at master · oumaabde/css-reference · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
---
layout: single
property_name: background-size
---

<section id="background-size" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/background-size/" data-property-name="background-size" data-tooltip="Single page for this property" target="_blank">Link</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="background-size">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/background-size" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="{{site.url}}/#background-size"><span>#</span>background-size</a>
    </h2>
    <div class="property-description">
      <p>Defines the size of the background image.</p>

    </div>

  </header>

    <style type="text/css">.background-size { background-image: url(/images/landscape.jpg);background-repeat: no-repeat;height: 150px;padding: 0; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-size: auto auto;">background-size: auto auto;</code>
        </p>
        <div class="example-description">
          <p>The background image will retain its <strong>original</strong> size.</p>
<p>For example, this background image is <strong>960px by 640px</strong> large. Its aspect ratio is <strong>3 by 2</strong>. It&#39;s bigger than its container (which is 150px high) and will thus be <strong>clipped</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div background-size " id="background-size-auto-auto">Hello world</div>
        </div>
      </aside>
          <style type="text/css">#background-size-auto-auto{ background-size:auto auto;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-size: 120px 80px;">background-size: 120px 80px;</code>
        </p>
        <div class="example-description">
          <p>You can specify a size in <strong>pixels</strong>:</p>
<ul><li>the first value is the <strong>horizontal</strong> size</li><li>the second is the <strong>vertical</strong> size</li></ul>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div background-size " id="background-size-120px-80px">Hello world</div>
        </div>
      </aside>
          <style type="text/css">#background-size-120px-80px{ background-size:120px 80px;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-size: 100% 50%;">background-size: 100% 50%;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>percentage</strong> values as well. Beware that this can alter the <strong>aspect ratio</strong> of the background image, and lead to unexpected results.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div background-size " id="background-size-100-50">Hello world</div>
        </div>
      </aside>
          <style type="text/css">#background-size-100-50{ background-size:100% 50%;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-size: contain;">background-size: contain;</code>
        </p>
        <div class="example-description">
          <p>The keyword <code>contain</code> will resize the background image to make sure it remains <strong>fully visible</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div background-size " id="background-size-contain">Hello world</div>
        </div>
      </aside>
          <style type="text/css">#background-size-contain{ background-size:contain;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-size: cover;">background-size: cover;</code>
        </p>
        <div class="example-description">
          <p>The keyword <code>cover</code> will resize the background image to make sure the element is <strong>fully covered</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div background-size " id="background-size-cover">Hello world</div>
        </div>
      </aside>
          <style type="text/css">#background-size-cover{ background-size:cover;}</style>
    </section>

</section>