HTML/CSS/Box Model/Background

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

Add background image to LI

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

   background: url(list-bkgd.gif) bottom;
   width: 298px;
   list-style: none;
   padding: 0 0 12px;
   margin: 0;

} li {

   color: #eee;
   font-family: Verdana, Arial, Verdana, sans-serif;
   padding: 7px 7px 7px 20px;
   border-bottom: 1px solid #888;
   background: url(list-marker.gif) no-repeat 5px .8em;

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

  • V
  • S
  • T
  • P

</body> </html>

</source>
   
  


background assigns the padding area inside the box to a background color and/or 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">

  • .box {
 display: static;
 overflow: visible;
 visibility: visible;
 width: 160px;
 height: 150px;
 padding: 30px;
 border-top: 30px solid gray;
 border-bottom: 30px solid black;
 border-left: 30px solid gray;
 border-right: 30px solid black;
 margin-left: 230px;
 margin-top: 80px;
 background-color: #ccc;

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

Box Model

</body> </html>

</source>
   
  


background: lightblue

   <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">
           div {
               position: absolute;
               padding: 10px;
               border: 1px solid black;
               opacity: 0.9;
               background: #ccc;
               width: 100px;
               height: 100px;
               top: 20px;
               left: 20px;
               z-index: 4;
           }
           div + div {
               background: lightblue;
               top: 40px;
               left: 40px; 
               z-index: 3;
           }
           div + div + div {
               background: lightgreen;
               top: 60px;
               left: 60px;
               z-index: 2;
           }
           div + div + div + div {
               background: pink;
               top: 80px;
               left: 80px;
               z-index: 1;
           }
           </style>
   </head>
   <body>
div1
div2
div3
div4
   </body>

</html>

</source>
   
  


background: lightgreen

   <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">
           div {
               position: absolute;
               padding: 10px;
               border: 1px solid black;
               opacity: 0.9;
               background: #ccc;
               width: 100px;
               height: 100px;
               top: 20px;
               left: 20px;
               z-index: 4;
           }
           div + div {
               background: lightblue;
               top: 40px;
               left: 40px; 
               z-index: 3;
           }
           div + div + div {
               background: lightgreen;
               top: 60px;
               left: 60px;
               z-index: 2;
           }
           div + div + div + div {
               background: pink;
               top: 80px;
               left: 80px;
               z-index: 1;
           }
           </style>
   </head>
   <body>
div1
div2
div3
div4
   </body>

</html>

</source>
   
  


background: pink

   <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">
           div {
               position: absolute;
               padding: 10px;
               border: 1px solid black;
               opacity: 0.9;
               background: #ccc;
               width: 100px;
               height: 100px;
               top: 20px;
               left: 20px;
               z-index: 4;
           }
           div + div {
               background: lightblue;
               top: 40px;
               left: 40px; 
               z-index: 3;
           }
           div + div + div {
               background: lightgreen;
               top: 60px;
               left: 60px;
               z-index: 2;
           }
           div + div + div + div {
               background: pink;
               top: 80px;
               left: 80px;
               z-index: 1;
           }
           </style>
   </head>
   <body>
div1
div2
div3
div4
   </body>

</html>

</source>
   
  


background: rgb( 128)

   <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> exercise 4-2 </title>
       <style type="text/css" media="all">
           body {
               font-size: 12px;
           }
           h1 {
               font-size: 25px;
               background: rgb(255, 192, 203);
               padding: 25px;
               border: thin solid rgb(0, 0, 0);
           }
           p {
               font-size: 11px;
               padding: 11px;
               border: thin solid rgb(0, 0, 0);
               background: rgb(128, 128, 128);
               color: rgb(255, 255, 255);
           }
       </style>
   </head>
   <body>

This is a heading

This is a paragraph of text.

   </body>

</html>

</source>
   
  


Background with no repeat

   <source lang="html4strict">

<html> <head> <title>Background with no repeat</title> <style type="text/css"> div { background:url("heading2.jpg") no-repeat; width:250px; height:76px; } </style> </head> <body>

Background Image

</body> </html>

</source>
   
  


Css Rollover with image

   <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"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body {

 text-align:center;

}

  1. nav{
 width:600px;
 margin-left:auto;
 margin-right:auto;

}

  1. nav ul, #nav li {
 margin:0;
 padding:0;
 list-style:none;

} li{

 float:left;
 width:100px;
 height:22px;
 line-height:22px;
 background:url(images/roll-up.jpg) no-repeat left top;

}

  1. nav a{
 display:block;
 width:100px;
 height:22px;
 background:url(images/roll-down.jpg) no-repeat left top;
 text-decoration:none;
 font-size:x-small;

}

  1. nav a:hover{background:transparent;}

</style> </head> <body>

</body> </html>

</source>
   
  


Set URL for Background Image

   <source lang="html4strict">

<html> <head> <title>Set URL for Background Image </title> <style type="text/css"> div { background:url("heading2.jpg") no-repeat; width:250px; height:76px; } </style> </head> <body>

Background Image

</body> </html>

</source>