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 .
<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 .
