How To Insert A Background Image In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this article we will show you the solution of how to insert a background image in HTML, in HTML5, the background attribute which we specified in the body tag isn't supported. In addition to adding background images to a webpage, we can also use CSS properties.
As demonstrated in all the examples, the CSS code will be defined inside the <style> tag.
As well as div tags and classes, we will look at how CSS can target them.
The following example specifies a background-image & background-color CSS property for the HTML body's background image & background property.
Firstly, let's take a look at the background image CSS property values before we understand how we can use them.
- URL: URL for the background image. Comma-separated lists are required for images with more than one.
- A linear gradient is set as the background image by linear-gradient(). A minimum of two colors is required.
- The radial gradient is set as the background image by the radial-gradient() function. A minimum of two colors is required.
- A linear gradient is repeated using repeating-linear-gradient()
- A radial gradient is repeated using repeating-radial-gradient()
- A property's default value is set when it is initialized
- Inherited from the parent element: inherited from the parent element
Step By Step Guide On How To Insert A Background Image In HTML :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bg2.jpg"), url("bg3.png");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
</style>
</head>
<body>
<p>Document Body</p>
</body>
</html>
- The first step is to write the HTML code in a text editor or open the existing HTML file in the text editor where we will use the Internal CSS option. Every example demonstrated the CSS code would be inside the <style> tag.
- In the HTML document, place the cursor in the head tag, immediately after the closing title tag, and then define the starting and closing tags of the style tag.
- The element body must now be typed in the style tag. In the background-image property, type the image that you want to use.
- The final step is to save the HTML code and run it in the text editor. A web page will have the image specified in the HTML document as its background after execution.
Conclusion :-
As a result, we have successfully learned how to insert a background image in HTML.
The methods CSS can use to target div tags and classes will also be covered.
For the HTML body's background image & background property, the following example specifies background-image & background-color CSS properties.
I hope this article on how to insert a background image in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
