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

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

Содержание

background-position: 0 0

   <source lang="html4strict">

<?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>

background-position

</body> </html> 

</source>


background-position: 0% 50%

   <source lang="html4strict">

<!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> 

</source>


background-position:

   <source lang="html4strict">

<!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>
10%, 10%
   </body>

</html> 

</source>


background-position: 10px 10px

   <source lang="html4strict">

<!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>
10px, 10px
   </body>

</html> 

</source>


background-position: 10px 50%

   <source lang="html4strict">

<!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>
10px, 50%
   </body>

</html> 

</source>


background-position: 10px top

   <source lang="html4strict">

<!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>
10px, top
   </body>

</html> 

</source>


background-position:x

   <source lang="html4strict">

<!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>
50%, 10px
   </body>

</html> 

</source>


background-position:

   <source lang="html4strict">

<?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>

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

This example illustrates the background-image property.

</body> </html> 

</source>


background-position: 50% center

   <source lang="html4strict">

<!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>
50%, center
   </body>

</html> 

</source>


background-position: bottom center

   <source lang="html4strict">

<!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>
bottom, center
   </body>

</html> 

</source>


background-position: bottom left

   <source lang="html4strict">

<!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>
bottom, left
   </body>

</html> 

</source>


background-position: center

   <source lang="html4strict">

<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> 

</source>


background-position: center 100%

   <source lang="html4strict">

                     "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>

    </body>

</html> 

</source>


background-position: center 10px

   <source lang="html4strict">

<!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>

    </body>

</html> 

</source>


background-position: center and background-repeat: repeat

   <source lang="html4strict">

<!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>

   </body>

</html> 

</source>


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

   <source lang="html4strict">

<!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>

   </body>

</html> 

</source>


background-position: center center

   <source lang="html4strict">

<!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>
center, center
   </body>

</html> 

</source>


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

   <source lang="html4strict">

<!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>

   </body>

</html> 

</source>


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

   <source lang="html4strict">

<!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>

   </body>

</html> 

</source>


"background-position" Example

   <source lang="html4strict">

<html> <head> </head> <body> 

           text in first div element.

           










           background-position-x is set to top. 

           background-position-y is set to right.

</body> </html> 


     </source>


background-position: left

   <source lang="html4strict">

<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> 

</source>


background-position: left center

   <source lang="html4strict">

<!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>
left, center
   </body>

</html> 

</source>


background-position: left top

   <source lang="html4strict">

<!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> 

</source>


background-position: right

   <source lang="html4strict">

<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> 

</source>


Background position: right bottom

   <source lang="html4strict">

<!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>


this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

</body> </html> 

</source>


background-position: right center

   <source lang="html4strict">

<!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>
right, center
   </body>

</html> 

</source>


Background-position specifies a position by keyword.

   <source lang="html4strict">

<!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>

    </body>

</html> 

</source>


Background-position specifies a position by length.

   <source lang="html4strict">

<!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>

    </body>

</html> 

</source>


Background-position specifies a position by percentage.

   <source lang="html4strict">

<!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>

    </body>

</html> 

</source>


background-position: top 10px

   <source lang="html4strict">

<!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>
top, 10px
   </body>

</html> 

</source>


background-position: top center

   <source lang="html4strict">

                     "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>
top, center
   </body>

</html> 

</source>


background-position: top left

   <source lang="html4strict">

                     "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>
top, left
   </body>

</html> 

</source>


background-position: top right

   <source lang="html4strict">

                     "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>
top, right
   </body>

</html> 

</source>


By length and percentage

   <source lang="html4strict">

<!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>

    </body>

</html> 

</source>


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

   <source lang="html4strict">

<!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>


this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

this is a text.

</body> </html> 

</source>


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

   <source lang="html4strict">

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. 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/background_position&oldid=4735»