How to add background image in HTML ?
Last Updated :
15 Apr, 2024
Adding a background image in HTML involves embedding an image into a webpage to display behind the content. This can be achieved by using the background attribute in the tag in HTML and using the style tag inline or in an external stylesheet to specify the image URL and control its placement and appearance.
Examples of adding background images in HTML
1. Using a style Attribute
To add a background image in HTML using a style attribute, apply CSS directly to the HTML element using the style attribute
Syntax:
<div style = "background-image: url('Image_name.extension');">Example: In this example we sets the background image of the body using the style attribute, specifying the image URL and preventing repetition.
HTML
<!DOCTYPE html>
<html>
<head>
<title>By using style attribute</title>
</head>
<body
style="background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20240412161651/using-style-attribute.jpg');
background-repeat: no-repeat;"
>
</body>
</html>
Output:
Using a style Attribute Example Output
2.Using The Background Attribute
Uisng background attribute to body or target tag we can easily set the background image in HTML.
Note: The background attribute in HTML is deprecated. Instead, use CSS properties like background-image applied inline or external css to set background images for elements.
Syntax:
<body background="image_name.image_extension">
Example: In this example we sets the background image of the body using the deprecated background attribute and specifies no repetition using inline CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image</title>
</head>
<body background=
"https://media.geeksforgeeks.org/wp-content/uploads/20240412161651/using-style-attribute.jpg"
style="background-repeat: no-repeat;">
</body>
</html>
Output:
Using The Background Attribute Example Output
3.Using the background-image property
Using the background-image property to set an element’s background. Specify the URL of the image file
Synatx:
background-image: url('url')Example: In this example we sets the body background image using CSS background-image property. The image URL is provided within the style block, with background-repeat set to no-repeat.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Background Image</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240415102919/
UsingBackgroundImageProperty.webp");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- Your content here -->
</body>
</html>
Output:
Using the “background-image” property Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...