HTML Background Images
A background image can be set on almost any HTML element.
Background Image on an HTML element
To put a background image on an element, use the style attribute with the CSS background-image property. You can also set it in a <style> element in the <head>.
Inline
A background image set inline on a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bg Inline</title>
</head>
<body>
<p style="background-image: url('img_girl.jpg');">This paragraph has a background image.</p>
</body>
</html>
In the style element
A background image set for all paragraphs in the <style> element.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<p>This paragraph has a background image.</p>
</body>
</html>
Background Image on a Page
To give the whole page a background image, set background-image on the <body> element.
Example
A background image for the entire page.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a background image.</p>
</body>
</html>
Background Repeat
If the background image is smaller than the element, it repeats across and down until the element is filled. To stop this, set the background-repeat property to no-repeat.
Repeating
A small background image repeating to fill the page.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>The background image repeats to fill the page.</p>
</body>
</html>
No repeat
The same image set not to repeat.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>The background image does not repeat.</p>
</body>
</html>
Background Cover
To make the background image cover the whole element, set background-size to cover. Set background-attachment to fixed so the element stays covered. The image keeps its proportions and is not stretched.
Example
A background image covering the whole page.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>The background image covers the whole page.</p>
</body>
</html>
Background Stretch
To make the background image stretch to fill the whole element, set background-size to 100% 100%. Resizing the window stretches the image, but it always covers the element.
Example
A background image stretched to fill the page.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>The background image stretches to fill the page.</p>
</body>
</html>
Learn More CSS
These examples show that background images are styled with the CSS background properties. To learn more, study the PromptCookbook CSS Background tutorial.