Content background : content section « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. content section

Content 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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
body {
    padding: 0;
    margin: 0;
    background: #8b8b8b;
}

p {
margin-top: 0;
}

#content {
    background: #ffffff;
    width: 500px;
    margin: 0;
    padding: 10px;
}
</style>
</head>
<body>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
    </div>
</body>
</html>








Related examples in the same category

1.Use
2.use
3.use
4.Set

in extra content

5.Set

and

in extra content section

6.Content section with border
7.Content scrolls, fixed footer
8.Content DIV
9.stretching content