In this tutorial, you will learn-
In this article, you will learn-
CSS Background Image
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
CSS background property is used to define the background effect on element.
CSS background-image
The background-image property specifies an image to use as the background of an element.
By default, the picture is repeated so it covers the whole element.
Example
Set the background image for a page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h2>Hello World!</h2>
<p>This page has an image as the background!</p>
</body>
</html>
Hello World!
This page has an image as the background!
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");
}
</style>
</head>
<body>
<h2>Hello World!</h2>
<p>This text is not easy to read on this background image.</p>
</body>
</html>
Hello World!
This text is not easy to read on this background image.
Note: When using a background picture, use a picture that doesn’t disturb the text.
The background picture can likewise be set for specific elements, similar to the <p> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h2>Hello World!</h2>
<p>This paragraph has an image as the background!</p>
</body>
</html>
Hello World!
This paragraph has an image as the background!
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
