In this tutorial we will show you the solution of HTML code for background image, in html, sometimes we want to make a webpage in we want to set an image as background. There are many ways with the help of which you are able to set an image as background of webpage.
The background with image looks more professional and creative way to represent your products but some developers and designers, don’t know that how to set image as background in html or webpage.
Step By Step Guide On HTML Code For Background Image :-
Now, as there are many ways with the help of which you are able to set an image as background, but teach you the simplest way that how you are able to do this.
For this, the basic requirement is the image in your computer and knowledge of html, with the help of these you are able to run the code and understand how it works when you customize the code according to your choice
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body style="background-image: url(demo10/logo.jpg);background-size: cover; background-repeat: no-repeat; ">
<div>
<p>Here, you can also able to apply the same CSS provided in body tag in this div tag, where as other content is also placed in this div tag. There are many other ways to set image as background like you can give a class in body tag or div and use as internal CSS. You can also use image tag in body, but that’s not an appropriate way to do this. So, div and body are mostly preferred for these kinds of tasks.</p>
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we create only CSS with some tags like background-image, background-size and background-repeat. For this current time period you have not to worry that what the tags are used for.
- You can use these tags as they are written here. But don’t worry, there are already session provided in our website, in which you will understand that what the work is done here, with the help of these tags and how they work.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that you are now able to make or set an image as background. Don’t worry if you not know about properties used here. It’s a step by step process. I hope this tutorial on HTML code for background image helps you.
About Anjali
