CSS Background Image
CSS background-image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Example :
Set the background image for a page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1> Hello AIT! </h1>
<p> This page has an image as the background! </p>
</body>
</html>
Result :
Example :
This example shows a bad combination of text and background image. The text is hardly readable:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bgdesert.jpg");
}
</head>
<body>
<h1> Hello AIT! </h1>
<p> This text is not easy to read on this background image. </p>
</body>
</html>
Result :
Example :
External styles are defined within the element, inside the
section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-image:url("paper.gif");
}
</style>
</head>
<body>
<h1> Hello AIT! </h1>
<p> This paragraph has an image as the background! </p>
</body>
</html>
Result :
