HTML/CSS/Box Model/background image

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

Adding background images and indentation

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

  <head>
     <title>Background Images</title>
     <style type = "text/css">
        body  { background-image: url(http://www.wbex.ru/style/logo.png);
                background-position: bottom right;
                background-repeat: no-repeat;
                background-attachment: fixed; }
        p     { font-size: 18pt;
                color: #aa5588; 
                text-indent: 1em;
                font-family: arial, sans-serif; }
        .dark { font-weight: bold; }
     </style>
  </head>
  <body>

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. 

  </body>

</html> 

</source>


background-image and background-color

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

body { 

 background-image: url(http://www.wbex.ru/style/logo.png);
 background-color: #ffffff;
 color: #000000;
 font-size: 24px;
 font-weight: bold;

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

This example illustrates the background-image property.

</body> </html> 

</source>


Only part of a large background image is visible because the element"s height is determined by the length of its contents.

   <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>Large background</title>
 <style type="text/css">
 div {
   background-image: url(images/bigslice.gif);
   background-repeat: no-repeat;
 }
 </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>


Set background image for first line text in paragraph

   <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"> p:first-line { 

font-size: 2em;
background-image: url(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. 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>


Set more than one image for background

   <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(plane.gif), url(mail.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>


Set style for strong to normal font weight and background color to yellow

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

font-weight: normal;
background-color: yellow;

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

not strong strong.

</body> </html> 

</source>


Use background-image:none to show no background image

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

  • .no-bg {
 background-image: none;
 background-color: transparent;

}

</style> </head> <body>

No background

</body> </html> 

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