How to add background image in HTML ?
Adding a background image to your HTML page can enhance the visual appeal and provide a more immersive experience for your website visitors. This process involves embedding an image behind your webpage content. You can do this by using the background attribute in HTML tags or the style tag, either inline or in an external stylesheet. This allows you to specify the image URL and control its placement and appearance.
Table of Content
- 1. Using a style Attribute
- 2. Using The Background Attribute
- 3. Using the background-image property
Examples of adding background images in HTML
1. Using a style Attribute
To incorporate a background image in HTML using a style attribute, you can apply CSS directly to the HTML element. For instance, you can set the background image of the body using the style attribute, specify the image URL, and prevent repetition. This method provides a straightforward way to customize the look and feel of your webpage.
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.
<!DOCTYPE html>
<html>
<head>
<title>By using style attribute</title>
</head>
<body
style="background-image: url(
'https://media.w3wiki.net/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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image</title>
</head>
<body background=
"https://media.w3wiki.net/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.
<!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.w3wiki.net/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
Understanding how to add a background image in HTML is a fundamental skill for web developers. Whether you’re using the style attribute, the background attribute, or the background-image property, each method offers unique advantages. Remember, while the background attribute is deprecated, you can achieve the same results with CSS properties like background-image.
Contact Us