HTML/CSS/Box Model/background position

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

background image position: left, right, top and bottom

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Positioning Backgrounds</title> <style> body { font: 16px Verdana, Arial, Helvetica, sans-serif; margin: 20px; color: black; background-color: #FFFFCC; } h1 { font: 24px Verdana, Arial, Helvetica, sans-serif; margin: 20px; padding: 35px; border: 2px solid; } h1.left { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: left; } h1.right { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: right; } h1.bottom { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: bottom; } h1.center { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: center; } </style> </head> <body>

pristine & clean

background-position: left;

background-position: right;

background-position: bottom;

background-position: center;

</body> </html> 

</source>


Background images repeat in both directions by default

   <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>Listing 5-9. A tiling background image</title>
 <style type="text/css">
 body { 
   background-image: url(images/background.gif);
 }
 </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: top right

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

 <title></title>

<style type="text/css"> div { 

background-image: url(f.jpg);
background-repeat: no-repeat;
background-position: top right;
height: 300px;
border: 1px solid black;
max-width: 714px;

} </style> </head> <body>

header 1!

<img src="http://www.wbex.ru/style/logo.png" alt=" " />

header 2

</body> </html> 

</source>


control different background image position: center, top center,x,x

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 

   <head>
       <title></title>

<style type="text/css"> h2 { 

   padding-top: 72px;
   text-align: center;
   Background-image: url(p.gif), url(m.gif), url(printer.gif), url(gift.gif);
   Background-position: center, top center, 40% 24px, 60% 24px;
   Background-repeat: no-repeat;

} </style> 

   </head>
   <body>

header 2

header 3

This is a text.

   </body>

</html> 

</source>


h1 with background image of different position

   <source lang="html4strict">

Positioning Backgrounds <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Positioning Backgrounds</title> <style type="text/css"> h1 { font: 24px Verdana, Arial, Helvetica, sans-serif; margin: 20px; padding: 35px; border: 2px solid; } h1.topLeft { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: top left; } h1.topRight { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: top right; } h1.centerCenter { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: center center; } h1.rightCenter { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: right center; } h1.bottomLeft { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: bottom left; } h1.bottomCenter { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: bottom center; } h1.bottomRight { background-image: url(position-test.gif); background-repeat: no-repeat; background-position: bottom right; } </style> </head> <body>

pristine & clean

top left

top right

center center

right center

bottom left

bottom center

bottom right

</body> </html> 

</source>


Set background-position: 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"> <head> <title></title> <style type="text/css"> h2 { 

background-image: url(t.jpg);
background-repeat: repeat-x;
background-position: bottom;
border-bottom: 10px solid #666;
margin: 10px 0 0 0;
padding: 0.5em 0 60px 0;

} </style> </head> <body>

This is a header

This is a text.

</body> </html> 

</source>


Set background-position to -125px 75px

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 

   <head>
       <title></title>

<style type="text/css"> body { 

background-image: url(b.jpg);
background-position: -125px 75px;
margin: 75px 75px 0 375px;

} h1, h2, h3 { 

padding-top: 0;
margin-top: 0;
text-transform: uppercase;

} </style> 

   </head>
   <body>

Header 1

Header 2

Header 3

 </body>

</html> 

</source>


set background position to 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" lang="en" xml:lang="en"> <head> <title></title> <style type="text/css"> h1, h2, h3 { 

font-size: 200%;
background-image: url(bkgd2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding: 1.5em;
text-align: center;
color: white;

} </style> </head> <body>

header 1

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. 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. 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 repeats horizontally along the x-axis

   <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>Repeating horizontally</title>
 <style type="text/css">
 body { 
   background-image: url(images/background.gif);
   background-repeat: repeat-x;
 }
 </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 repeats vertically along the y-axis

   <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>Repeating vertically</title>
 <style type="text/css">
 body { 
   background-image: url(images/background.gif);
   background-repeat: repeat-y;
 }
 </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>


Use image as background with background-position: center 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"> <head> <title></title> <style type="text/css">

  • .bg-pos-lt {
 background-position: center bottom;
 width: 300px;
 height: 300px;
 background-image: url(http://www.wbex.ru/style/logo.png);

} </style> </head> <body>

Background image center bottom

</body> </html> 

</source>


Use image as background with 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"> <head> <title></title> <style type="text/css">

  • .bg-pos-rb {
 background-position: right bottom;
 width: 300px;
 height: 300px;
 background-image: url(http://www.wbex.ru/style/logo.png);

} </style> </head> <body>

Background image right bottom

</body> </html> 

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