HTML/CSS/Box Model/background image

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

Adding background images and indentation

 
<?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>
      <p>this is a test. this is a test. this is a test. 
      <span class = "dark">this is a test. this is a test. </span> 
      this is a test. this is a test. this is a test. this is a test. 
      </p>
   </body>
</html>



background-image and background-color

 
<?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>
<p>This example illustrates the <b>background-image</b> property.</p>
</body>
</html>



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

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



Set background image for first line text in paragraph

 
<!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>
<p>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. </p>
  
</body>
</html>



Set more than one image for background

 
<!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>
<h2>header 2</h2>
<h3>header 3</h3>
<p>This is a text.</p>

    </body>
</html>



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

 
<!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>
  <p>not strong <strong>strong.</strong></p>
  
</body>
</html>



Use background-image:none to show no background image

 
<!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>
  <p><div class="no-bg">No background</div></p> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/background_image&oldid=5289»