fixed background image using css -

Fixed background image in HTML page using CSS

To fix the background image static at center, means no scrolling image! The following CSS page must be created. Have a look.

h1 {
 background-color: green;
}

div {
 background-image: url("d:\solid.jpg");
}

p {
 background-color: yellow;
}

BODY
{
background-image:url("d:\java-logo.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

table
{
background-color:cyan;
}

td, th
{
padding:15px;
}

tr:hover 
{
background-color: yellow
}

tr:nth-child(even)
{
background-color: grey
}

And Now create HTML page with following syntax in it.

<html>
<head>
<link rel="stylesheet" type="text/css" href="ss.css">
</head>

<body>
<h1> Welcome to CSS </h1>
<p> Welcome to CSS - paragraph text here... </p>
<hr>

<table border=2>
<tr> <td> SrNo </td>
<td> Course Name </td>
<td> Type </td></tr>

<tr> <td> 1 </td>
<td> Digital Marketing </td>
<td> IT and Mgt </td></tr>

<tr> <td> 2 </td>
<td> Data Analytics </td>
<td> IT </td></tr>

<tr> <td> 3 </td>
<td> Six Sigma Green Belt </td>
<td> Mgt </td></tr>
</table>
<hr>

<div>
<h2> Text with background fixed image </h2>
<h3> Text with background fixed image </h3>
<h4> Text with background fixed image </h4>
<h5> Text with background fixed image </h5>
</div>

</body></html>

Output of the above program is..

Also check here for fixed header(logo) and menu bar using css

Fixed background image in HTML page using CSS

Related Posts