fixed background image Archives - https://mitindia.in/tag/fixed-background-image/ Mon, 23 Jan 2017 11:14:45 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png fixed background image Archives - https://mitindia.in/tag/fixed-background-image/ 32 32 fixed background image using css https://mitindia.in/fixed-background-image-using-css/ Sat, 21 Jan 2017 12:19:54 +0000 http://www.mitindia.in/?p=728 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; } […]

The post fixed background image using css appeared first on .

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

fixed background image in css

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

 

Share

The post fixed background image using css appeared first on .

]]>