HTML CSS Reference/CSS Attributes and Javascript Style Properties/background position

Материал из Web эксперт
Перейти к: навигация, поиск

"background-position" Example

    
<html>
<head>
</head>
<body>
<div style="background:blue url(http://www.wbex.ru/style/logo.png) repeat top left; 
            width:200; 
            border:3; 
            height:150; font-size:14">www.wbex.ru</div>
            <br><br><br><br><br><br><br><br><br>
<div style="background-color:red; 
            background-attachment:fixed; 
            background-image:url(http://www.wbex.ru/style/logo.png); 
            background-repeat:repeat; 
            background-position-x:top; 
            background-position-y:left; 
            width:200; 
            border:3; 
            height:150; 
            font-size:14">www.wbex.ru</div>
            Text
</body>
</html>



"background-position" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |<a>                             <address>                     |
|                |<b>                             <big>                         |
|                |<blockquote>                    <body>                        |
|                |<button>                        <caption>                     |
|                |<center>                        <cite>                        |
|                |<code>                          <col>                         |
|                |<colgroup>                      <custom>                      |
|                |<dd>                            defaults                      |
|                |<dfn>                           <dir>                         |
|                |<div>                           <dl>                          |
|                |<dt>                            <em>                          |
|                |<fieldset>                      <form>                        |
|                |<hn>                            <html>                        |
|                |<i>                             <img>                         |
|                |<inputtype="button">            <input type="checkbox">       |
|                |<input type="file">             <input type="image">          |
|                |<input type="password">         <input type="radio">          |
|                |<input type="reset">            <inputtype="submit">          |
|                |<input type="text">             <isindex>                     |
|                |<kbd>                           <label>                       |
|                |<legend>                        <li>                          |
|                |<listing>                       <marquee>                     |
|                |<menu>                          <ol>                          |
|                |<p>                             <pre>                         |
|                |runtimeStyle                    <s>                           |
|                |<samp>                          <small>                       |
|                |<span>                          <strike>                      |
|                |<strong>                        style                         |
|                |<sub>                           <sup>                         |
|                |<table>                         <tbody>                       |
|                |<td>                            <textarea>                    |
|                |<tfoot>                         <th>                          |
|                |<thead>                         <tr>                          |
|                |<tt>                            <u>                           |
|                |<ul>                            <var>                         |
|                |<xmp>                                                         |
+----------------+--------------------------------------------------------------+



"background-position" Possible Values

Possible Values
length          A floating-point number followed by a unit designator
percentage      An integer followed by a percent sign; the percent is 
                basedon the height and width of the element
constant        left, center, or right for the horizontal alignment and
                top, center, or bottom for the vertical alignment



"background-position" Syntax and Note

Note:
Left and top coordinates of the background image.
If two values are provided, 
the first value sets the horizontal position
the second value sets the vertical position. 
If one value is provided, 
only the horizontal position is set, 
the vertical position will be set to 50 percent of the page height.
Syntax:
    
element { background-position: value }
elementID.style.backgroundPosition = "value"
document.all.elementID.style.backgroundPosition = "value" // IE only