Background grid : background « CSS « HTML / CSS






Background grid

  

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Background grid</title>
<style type='text/css'>
body {
  background-color:#000000;
  margin:0px;
  padding:0px;}
h1 {
  margin:0px;}


#frame {
  width:960px;
  margin-left:auto;
  margin-right:auto;
  background-image:url("http://java2s.com/style/logo.png");
  background-repeat:repeat-y;}

#page {
  width:940px;
  margin-left:auto;
  margin-right:auto;}
</style>

  </head> 
  <body><div id="frame"><div id="page">
        <h1>Testing the background grid</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. Proin erat. Donec sem. </p>
        <p>Mauris quis urna. Donec sodales, risus non dictum ultricies, nisl lorem imperdiet sapien, vel euismod orci risus non lorem. Nam tempus, pede nec tincidunt lacinia, lectus mauris malesuada quam, a tincidunt elit justo a ligula. Nunc cursus nonummy nulla. Quisque adipiscing. Donec nisl elit, viverra in, elementum eu, auctor id, eros. Sed sagittis, neque vel blandit tempor, justo odio posuere nulla, at condimentum lorem nibh suscipit arcu. Mauris rhoncus, nunc vel hendrerit aliquet, purus velit iaculis mauris, aliquam eleifend ante augue ut velit. Pellentesque sed turpis vel odio varius posuere. Ut urna mi, ultricies ut, lobortis in, varius porta, nulla. </p>
      </div>
    </div>
  </body>
</html>

   
    
  








Related examples in the same category

1.'background' Example
2.The background shorthand property provides for specifying all five separate background properties in one single property.
3.background: mistyrose
4.background: gray
5.background: rgb(128, 128, 128)
6.The background-color value can be transparent keyword, which is also the default value.
7.The background-color value can be a hexadecimal value
8.The background-color value can be a short hexadecimal value
9.background: yellow;
10.background: white url('http://java2s.com/style/logo.png') center center; (image and position)
11.background: url('http://java2s.com/style/logo.png') repeat-x; (background-image-repeat)
12.background: url('http://java2s.com/style/logo.png') repeat-y scroll; (background image repeat attachment)
13.background: mistyrose;
14.background: pink;
15.background: lightyellow;
16.background: rgb(234, 234, 234);
17.background: yellowgreen;
18.background: no-repeat fixed bottom center;
19.background x tiled
20.background y tiled
21.Background fixed
22.Whole page background
23.Whole page shading effect
24.HTML and CSS for background colors
25.Using more than one background image
26.Merge several image to one big background image
27.CSS Background Attributes Example
28.Link with background
29.hr border: none; background-color: #256579; color: #256579; height: 2px; width: 80%;
30.tfoot td background: #808080;color: white;
31.background attachment: fixed
32.option background-color: #3CB371;color: #ffffff;
33.code padding:3px; background-color:black; color:#FFFFFF;
34.background-attachment: fixed;
35.demonstrating the background-color property
36.a:hover {color:#FF9900; text-decoration:underline; background-color:#f9f0f0;}
37.thead, tfoot {border:solid; background-color:#efefef; font-size:36px;}
38.Update background image when mouse hover
39.Using background image for DIV
40.background: url(img/document.gif) no-repeat left center;
41.Change background when mouse hover
42.a:hover background: inherit;
43.Using shade image to as the title bar background
44.Round corner with background image
45.Shading background
46.Blue background
47.Black background
48.background: #ffffff url(1024px-images/background.gif) top center repeat-y;
49.Round corner with background image 2
50.Block quote with background
51.background: rgb(244, 244, 244);
52.The background shorthand property
53.background assigns the padding area inside the box to a background color and/or image.
54.Set URL for Background Image
55.Background with no repeat
56.Add background image to LI
57.background: lightblue
58.background: lightgreen
59.background: pink
60.Css Rollover with image