CSS background-image
The background-image property sets an image to use as the background of an element.
By default, the image repeats so it covers the whole element.
Note: Pick a background image that does not make the text hard to read.
Page background image
The image is set as the background of the whole page.
Prompt
An HTML page that sets a background image for the whole page.
In an internal
<style> block, set the body background-image to url("paper.gif"). Add a heading and a paragraph. By default the image repeats to cover the page.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page uses paper.gif as its background image.</p>
</body>
</html>
Bad combination
This shows a poor mix of text and background image, where the text is hard to read.
Prompt
An HTML page that shows a poor choice of background image, where the text is hard to read.
In an internal
<style> block, set the body background-image to url("bgdesert.jpg"). Add a heading and a paragraph of text on top of it.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This busy background image makes the text hard to read.</p>
</body>
</html>
Background image on a paragraph
The background image can also be set on a specific element, such as the <p> element.
Prompt
An HTML page that sets a background image on a single element instead of the page.
In an internal
<style> block, set the <p> background-image to url("paper.gif"). Add a paragraph so only it gets the image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Only this paragraph uses paper.gif as its background image.</p>
</body>
</html>
The CSS Background Image Property
The property covered on this page is background-image, which sets the background image for an element.