mozilla

Compare Revisions

background-position

Change Revisions

Revision 299835:

Revision 299835 by ethertank on

Revision 318727:

Revision 318727 by ethertank on

Title:
background-position
background-position
Slug:
CSS/background-position
CSS/background-position
Tags:
"css", "NeedsMobileBrowserCompatibility", "CSS Reference"
"css", "NeedsMobileBrowserCompatibility", "CSS Reference"
Content:

Revision 299835
Revision 318727
n7    <p>n7    <div>
8      {{ CSSRef() }}8      {{ CSSRef }}
9    </p>9    </div>
10    <h2 id="Summary">10    <h2 id="Summary" name="Summary">
n21        <dfn>{{ Xref_cssinitial() }}</dfn> <code>0% 0%</code>n21        <dfn>{{ Xref_cssinitial }}</dfn> <code>0% 0%</code>
n27        <dfn>{{ Xref_cssinherited() }}</dfn> non27        <dfn>{{ Xref_cssinherited }}</dfn> no
n33        <dfn>Media</dfn> {{ Xref_cssvisual() }}n33        <dfn>Media</dfn> {{ Xref_cssvisual }}
34      </li>
35      <li>34      </li>
35      <li>
36        <dfn>{{ Xref_csscomputed()}}</dfn> If one or two values a36        <dfn>{{ Xref_csscomputed()}}</dfn> If one or two values a
>re specified, for a {{ xref_csslength() }} the absolute length, o>re specified, for a {{ xref_csslength }} the absolute length, oth
>therwise a percentage.<br>>erwise a percentage.<br>
n40    <h2 id="Syntax">n40    <h2 id="Syntax" name="Syntax">
n43    <pre class="eval">n43    <pre class="syntaxbox">
n46    <h3 id="Values">n46    <h3 id="Values" name="Values">
n54        Is a {{ xref_cssposition() }}, that is one to four valuesn54        Is a {{ xref_cssposition }}, that is one to four values r
> representing a 2D position regarding the edges of the element's >epresenting a 2D position regarding the edges of the element's bo
>box. Relative or absolute offsets can be given. Note that the pos>x. Relative or absolute offsets can be given. Note that the posit
>ition can be set outside of the element's box.>ion can be set outside of the element's box.
n57    <h2 id="Examples">n57    <h2 id="Examples" name="Examples">
n63    <pre class="brush:css; highlight:[3,8,12,17,26,32];">n63    <pre class="brush:css; highlight:[3,8,12,17,26,35];">
n65        background-image: url("logo.png");n65  background-image: url("logo.png");
66        background-position: top;66  background-position: top;
n70        background-image: url("logo.png");n70  background-image: url("logo.png");
71        background-position: 25% 75%;71  background-position: 25% 75%;
n75        background: url("logo.png") 2cm bottom;n75  background: url("logo.png") 2cm bottom;
n79        background-image: url("logo.png");n79  background-image: url("logo.png");
80        background-position: center 10%;80  background-position: center 10%;
n84        background: url("logo.png") 3em 50%;n84  background: url("logo.png") 3em 50%;
n88        background-image: url("logo.png");n88  background-image: url("logo.png");
89        background-position: right 20px bottom 20px;89  background-position: right 20px bottom 20px;
n92.exampleseven { /* Multiple background images: Each image is matcn92.exampleseven {
>hed with the corresponding position style,  
93  /* Multiple background images:
94       Each image is matched with the corresponding position styl
 >e, 
93                   from first specified to last. */95       from first specified to last. */
96 
n96n99}
n98    <h2 id="Specifications">n101    <h2 id="Specifications" name="Specifications">
n135            Allows for the mix of keyword values and {{ xref_cssln138            Allows for the mix of keyword values and {{ xref_cssl
>ength() }} and {{ xref_csspercentage() }} values.>ength }} and {{ xref_csspercentage }} values.
n151    <h2 id="Browser_compatibility">n154    <h2 id="Browser_compatibility" name="Browser_compatibility">
n155      {{ CompatibilityTable() }}n158      {{ CompatibilityTable }}
n225              {{ CompatNo() }} {{ webkitbug("37514") }}n228              {{ CompatNo }} {{ webkitbug("37514") }}
n231              {{ CompatNo() }}n234              {{ CompatNo }}
n237              {{ CompatNo() }} {{ webkitbug("37514") }}n240              {{ CompatNo }} {{ webkitbug("37514") }}
n271              {{ CompatVersionUnknown() }}n274              {{ CompatVersionUnknown }}
n277              {{ CompatVersionUnknown() }}n280              {{ CompatVersionUnknown }}
278            </td>
279            <td>281            </td>
282            <td>
280              {{ CompatVersionUnknown() }}283              {{ CompatVersionUnknown }}
281            </td>
282            <td>284            </td>
285            <td>
283              {{ CompatVersionUnknown() }}286              {{ CompatVersionUnknown }}
n291              {{ CompatUnknown() }}n294              {{ CompatUnknown }}
n297              {{ CompatUnknown() }}n300              {{ CompatUnknown }}
298            </td>
299            <td>301            </td>
302            <td>
300              {{ CompatUnknown() }}303              {{ CompatUnknown }}
301            </td>
302            <td>304            </td>
305            <td>
303              {{ CompatUnknown() }}306              {{ CompatUnknown }}
n311              {{ CompatNo() }}n314              {{ CompatNo }}
n317              {{ CompatUnknown() }}n320              {{ CompatUnknown }}
318            </td>
319            <td>321            </td>
322            <td>
320              {{ CompatUnknown() }}323              {{ CompatUnknown }}
321            </td>
322            <td>324            </td>
325            <td>
323              {{ CompatNo() }}326              {{ CompatNo }}
n329    <h2 id="See_also">n332    <h2 id="See_also" name="See_also">
t333      <li>Background-related CSS properties: {{ CSS_Reference:Bact336      <li>Background-related CSS properties: {{ CSS_Reference:Bac
>kground() }}>kground }}
334      </li>
335      <li>337      </li>
338      <li>
336        <a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Mult339        <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS
>iple backgrounds">Multiple backgrounds</a>>/Multiple backgrounds">Multiple backgrounds</a>

Back to History