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

Материал из Web эксперт
Версия от 08:15, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

background-position: 0 0

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
body {
  background-image: url(http://www.wbex.ru/style/logo.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #ffffff;
  font-family: arial;
}
div {
  background-image: url(http://www.wbex.ru/style/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 500px;
  height: 100px;
  border: solid 1px black;
}
</style>
</head>
<body>
<h2>background-position</h2>
<div></div>
</body>
</html>



background-position: 0% 50%

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            html, body {
                height: 1000px;
            }
            body {
                background-image: url("backgroundImage.jpg");
                background-repeat: no-repeat;
                background-position: 0% 50%;
            }
        </style>
    </head>
    <body>
    </body>
</html>



background-position:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#percentage    {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: 10% 10%;      
}
        </style>
    </head>
    <body>
        <div id="percentage">10%, 10%</div>
    </body>
</html>



background-position: 10px 10px

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#length        {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: 10px 10px;    
}
        </style>
    </head>
    <body>
        <div id="length">10px, 10px</div>
    </body>
</html>



background-position: 10px 50%

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#length-percentage  {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 4px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: 10px 50%;  
}
        </style>
    </head>
    <body>
        <div id="length-percentage">10px, 50%</div>
    </body>
</html>



background-position: 10px top

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#length-keyword     {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 4px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: 10px top;  
}
        </style>
    </head>
    <body>
       <div id="length-keyword">10px, top</div>
    </body>
</html>



background-position:x

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#percentage-length  {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 4px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: 50% 10px;  
}
        </style>
    </head>
    <body>
        <div id="percentage-length">50%, 10px</div>
    </body>
</html>



background-position:

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
/* style sheet demonstrating the background-image property */
body {
  background-image: url(http://www.wbex.ru/style/logo.png);
  background-position: 50% 20%;
  background-repeat: no-repeat;
  background-color: #f2f2f2;
}
</style>
</head>
<body>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
<p>This example illustrates the <b>background-image</b> property.</p>
</body>
</html>



background-position: 50% center

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#percentage-keyword {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 4px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: 50% center;
}
        </style>
    </head>
    <body>
       <div id="percentage-keyword">50%, center</div>
    </body>
</html>



background-position: bottom center

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#bottom-center {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: bottom center;
}
        </style>
    </head>
    <body>
        <div id="bottom-center">bottom, center</div>
    </body>
</html>



background-position: bottom left

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#bottom-left   {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: bottom left;  
}
        </style>
    </head>
    <body>
        <div id="bottom-left">bottom, left</div>
    </body>
</html>



background-position: center

 
<html>
<head>
<title>Background position </title>
<style>
body   {background-color: cyan;
        background-image: url(http://www.wbex.ru/style/logo.png);
        background-repeat: repeat-x;
  background-position: center;}
</style>
</head>
<body>
</body>
</html>



background-position: center 100%

 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
body {
    font: 12px sans-serif;
}
p {
    background: yellow;
    padding: 3px;
    clear: left;
}
div {
    height: 81px;
    width: 81px;
    margin: 20px;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    float: left;
    border: 1px solid rgb(128, 128, 128);
}
div#percentage-keyword {
    background-position: center 100%;
}
        
        </style>
    </head>
    <body>
        <div id="percentage-keyword">
        </div>
     </body>
</html>



background-position: center 10px

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
body {
    font: 12px sans-serif;
}
p {
    background: yellow;
    padding: 3px;
    clear: left;
}
div {
    height: 81px;
    width: 81px;
    margin: 20px;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    float: left;
    border: 1px solid rgb(128, 128, 128);
}
div#length-keyword {
    background-position: center 10px;
}
        
        </style>
    </head>
    <body>
        <div id="length-keyword">
        </div>
     </body>
</html>



background-position: center and background-repeat: repeat

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#repeat-single {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(234, 234, 234);
    margin: 4px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");

    background-position: center;
    background-repeat: repeat;
}
        </style>
    </head>
    <body>
        <div id="repeat-single"></div>
    </body>
</html>



background-position: center and background-repeat: repeat-y

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#repeat-y-single {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(234, 234, 234);
    margin: 4px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");

    background-position: center;
    background-repeat: repeat-y;
}     </style>
    </head>
    <body>
       <div id="repeat-y-single"></div>
    </body>
</html>



background-position: center center

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#center-center {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: center center;
}
        </style>
    </head>
    <body>
        <div id="center-center">center, center</div>
    </body>
</html>



background-position: center center and background-repeat: repeat-x

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#repeat-x {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(234, 234, 234);
    margin: 4px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");

    background-position: center center;
    background-repeat: repeat-x;
}
        </style>
    </head>
    <body>
        <div id="repeat-x"></div>
    </body>
</html>



background-position: center center and background-repeat: repeat-y

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#repeat-y {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(234, 234, 234);
    margin: 4px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");

    background-position: center center;
    background-repeat: repeat-y;
}      </style>
    </head>
    <body>
       <div id="repeat-y"></div>
    </body>
</html>



"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">
            
            text in first div element.
            </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:right; 
            width:200; 
            border:3; 
            height:150; 
            font-size:14">
            
            background-position-x is set to top. <br>
            background-position-y is set to right. 
            
            </div>
</body>
</html>



background-position: left

 

<html>
<head>
<title>Background position left</title>
<style>
body   {background-color: cyan;
        background-image: url(http://www.wbex.ru/style/logo.png);
        background-repeat: repeat-x;
  background-position: left;}
</style>
</head>
<body>
</body>
</html>



background-position: left center

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#left-center   {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: left center;  
}
        </style>
    </head>
    <body>
        <div id="left-center">left, center</div>
    </body>
</html>



background-position: left top

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            html, body {
                height: 1000px;
            }
            body {
                background-image: url("http://www.wbex.ru/style/logo.png");
                background-repeat: no-repeat;
                background-position: left top;
            }
        </style>
    </head>
    <body>
    </body>
</html>



background-position: right

 

<html>
<head>
<title>Background position right </title>
<style>
body   {background-color: cyan;
        background-image: url(http://www.wbex.ru/style/logo.png);
        background-repeat: repeat-x;
  background-position: right;}
</style>
</head>
<body>
</body>
</html>



Background position: right bottom

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Background position, right bottom</title>
  <style type="text/css">
  div {
    background-image: url(images/background.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
  }
  </style>
</head>
<body>
  
 
  <div>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  </div>
  
</body>
</html>



background-position: right center

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#right-center  {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: right center; 
}
        </style>
    </head>
    <body>
        <div id="right-center">right, center</div>
    </body>
</html>



Background-position specifies a position by keyword.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
body {
    font: 12px sans-serif;
}
p {
    background: yellow;
    padding: 3px;
    clear: left;
}
div {
    height: 81px;
    width: 81px;
    margin: 20px;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    float: left;
    border: 1px solid rgb(128, 128, 128);
}
div#keyword {
    background-position: center center;
}
        
        </style>
    </head>
    <body>
        <div id="keyword">
        </div>
     </body>
</html>



Background-position specifies a position by length.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
body {
    font: 12px sans-serif;
}
p {
    background: yellow;
    padding: 3px;
    clear: left;
}
div {
    height: 81px;
    width: 81px;
    margin: 20px;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    float: left;
    border: 1px solid rgb(128, 128, 128);
}
div#length {
    background-position: 10px 10px;
}
        
        </style>
    </head>
    <body>
        <div id="length">
        </div>
     </body>
</html>



Background-position specifies a position by percentage.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
body {
    font: 12px sans-serif;
}
p {
    background: yellow;
    padding: 3px;
    clear: left;
}
div {
    height: 81px;
    width: 81px;
    margin: 20px;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    float: left;
    border: 1px solid rgb(128, 128, 128);
}
div#percentage {
    background-position: 60% 60%;
}
        
        </style>
    </head>
    <body>
        <div id="percentage">
        </div>
     </body>
</html>



background-position: top 10px

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#keyword-length     {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 4px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: top 10px;  
}
        </style>
    </head>
    <body>
        <div id="keyword-length">top, 10px</div>
    </body>
</html>



background-position: top center

 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#top-center    {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: top center;   
}
        </style>
    </head>
    <body>
        <div id="top-center">top, center</div>
    </body>
</html>



background-position: top left

 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#top-left      {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: top left;     
}
        </style>
    </head>
    <body>
        <div id="top-left">top, left</div>
    </body>
</html>



background-position: top right

 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
div#top-right     {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(128, 128, 128);
    margin: 10px;
    float: left;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    font: 12px sans-serif;
    background-position: top right;    
}
        </style>
    </head>
    <body>
        <div id="top-right">top, right</div>
    </body>
</html>



By length and percentage

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>background-position</title>
        <style rel="stylesheet" type="text/css">
body {
    font: 12px sans-serif;
}
p {
    background: yellow;
    padding: 3px;
    clear: left;
}
div {
    height: 81px;
    width: 81px;
    margin: 20px;
    background-image: url("http://www.wbex.ru/style/logo.png");
    background-repeat: no-repeat;
    float: left;
    border: 1px solid rgb(128, 128, 128);
}
div#length-percentage {
    background-position: 80% 10px;
}
        
        </style>
    </head>
    <body>
        <div id="length-percentage">
        </div>
     </body>
</html>



The background is positioned 40 pixels from the left and 3 ems from the top

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Background position, 40px 3em</title>
  <style type="text/css">
  div {
    background-image: url(images/background.gif);
    background-repeat: no-repeat;
    background-position: 40px 3em;
  }
  </style>
</head>
<body>
  
 
  <div>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  </div>
  
</body>
</html>



The background-position Property (for fixing position of backgrounds)

 
Value      Meaning
x% y%      Percentages along the x (horizontal) and y (vertical) axis.
x y        Absolute lengths along the x (horizontal) and y (vertical) axis.
left       Show to the left of the page or containing element.
center     Show to the center of the page or containing element.
right      Show to the right of the page or containing element.
top        Shown at the top of the page or containing element.
center     Shown at the center of the page or containing element.
bottom     Shown at the bottom of the page or containing element.
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/background_position&oldid=4735»