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

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

"background" Example

    
<html>
<head>
</head>
<body>
<div style="background:blue url(http://www.wbex.ru/style/logo.png) repeat top left; 
            width:200; 
            border:3; 
            height:150; font-size:14">
            
            background properties in a single line.
            </div>
            <br><br><br><br><br><br><br><br><br>
<div style="background-color:red; 
            background-attachment:fixed; 
            background-image:url(http://www.wbex.ru/style/logo.png); 
            background-repeat:repeat; 
            background-position-x:top; 
            background-position-y:left; 
            width:200; 
            border:3; 
            height:150; 
            font-size:14">
            
            background properties are not set in a single line, which is more readable 
            and easy to change.
            </div>
</body>
</html>



background: gray

 
<!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" media="all">
            body {
                font-size: 12px;
            }
            h1 {
                font-size: 2.1em;
                background: pink;
                padding: 1em;
                border: thin solid black;
            }
            p {
                font-size: 0.9em;
                padding: 1em;
                border: thin solid black;
                background: gray;
                color: white;
            }
        </style>
    </head>
    <body>
        <h1>
            This is a heading
        </h1>
        <p>
            This is a paragraph of text.
        </p>
    </body>
</html>



background: mistyrose

 
<!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>cursor</title>
        <style rel="stylesheet" type="text/css">
div {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(234, 234, 234);
    margin: 5px;
    cursor: wait;
    background: mistyrose;
}        
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>



background: rgb( 128)

 
<!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" media="all">
            body {
                font-size: 12px;
            }
            h1 {
                font-size: 25px;
                background: rgb(123, 123, 123);
                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>
        <h1>
            This is a heading
        </h1>
        <p>
            This is a paragraph of text.
        </p>
    </body>
</html>



The background-color value can be a hexadecimal value

 
<!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-color</title>
        <style rel="stylesheet" type="text/css">
body {
    background-color: pink;
    line-height: 32px;
}
div {
     border: 1px solid rgb(123, 123, 123);
    background-color: #000000;
    color: #ffffff;
     width: 200px;
     height: 300px;
}
        
        </style>
    </head>
    <body>
        <div>asdf
        </div>
    </body>
</html>



The background-color value can be a short hexadecimal value

 

<!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-color</title>
        <style rel="stylesheet" type="text/css">
body {
    background-color: pink;
    line-height: 32px;
}
div {
     border: 1px solid rgb(0, 0, 0);
    background-color: #fff;
    color: #000;
     width: 200px;
     height: 300px;
}
        
        </style>
    </head>
    <body>
        <div>asdf
        </div>
    </body>
</html>



The background-color value can be transparent keyword, which is also the default value.

 
<!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-color</title>
        <style rel="stylesheet" type="text/css">
body {
    background-color: pink;
    line-height: 32px;
}
div {
     border: 1px solid rgb(123, 123, 123);
     background-color: transparent;
     color: #000;
     width: 200px;
     height: 300px;
}
        
        </style>
    </head>
    <body>
        <div>asdf
        </div>
    </body>
</html>



The background shorthand property provides for specifying all five separate background properties in one single property.

 
<!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</title>
         <style rel="stylesheet" type="text/css">
div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
}
div#background {
    background: white url("http://www.wbex.ru/style/logo.png") no-repeat scroll center center;
}
         
         </style>
     </head>
     <body>
         <div id="background">
         </div>
     </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/background&oldid=4849»