How to use the background-image property In HTML
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.org/wp-content/uploads/20240415102919/
UsingBackgroundImageProperty.webp");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- Your content here -->
</body>
</html>
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
.
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