CSS : Applying CSS to your web page

To add a background image to the header add a folder named images inside Movies Freak folder and name the image a.jpg if it is a jpeg file .


          
       <style type="text/css">
         html, body {
                margin: 0;
                padding: 0;
                border: none;
                background: white;
              }
          body {
             color: #800080;
             font-family:"Times New Roman", sans-serif,Verdana;
             font-size: 75%;
           }
          #header h2{
             background-image: url(images/a.jpg)
             background-repeat: no-repeat;
             background-position: right top;
             height: 280px;
            }
      </style>
Tweak or edit the image so that it occupies the whole viewport . Set horizontal dimension to about 920px. We will place the list inside h2 to the right of the image later .Since , by default any image added to html is tiled vertically as well as horizontally . To avoid repetition we use statement

    
            background-repeat: no-repeat;

background-position - It specifies the position of the image relative to the CSS box .left , bottom and center are other keywords that are used to specify the position of the image .

height - Specifies height of the image .


In this case our h2 title "Movies Freak" is overlapping over the image .
     
          <h2><a href="index.html">Movies Freak</a> </h2>



In order to remove this heading from the picture .

        #header h2{
             background-image: url(images/a.jpg)
             background-repeat: no-repeat;
             background-position: right top;
             height: 280px;
             text-indent: -999px;
             margin: 1em;
             }

By setting a large negative value for text-indent property we move the title beyond the top left portion of the viewport .

 


 
         #header h2{
             background-image: url(images/a.jpg)
             background-repeat: no-repeat;
             background-position: right top;
             height: 280px;
             text-indent: -999px;
             margin-right: 1em;
            }
         #header h2 a {
                 display: block;
                 width: 800px;
                 height: 100%;
               }
       </style>



#header h2 a - <a> element is contained inside <h2> element . Width is set as same to the width of the image used . This helps in using the image as a link to the home page .