All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Set Background Image In HTML

Last Updated : Mar 11, 2024

How To Set Background Image In HTML

In this tutorial we will show you the solution of how to set background image in HTML, 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 How To Set Background Image In HTML :-

Now, as there are many ways with the help of which you are able to set an image as background, but we 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 basic 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>
          <title> Title of the document<title>
   <body style="background-image: url(demo10/logo.jpg);background-size: cover; background-repeat: no-repeat; ">
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.
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. 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.
  6. 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.
  7. But don’t worry, there are already some sessions 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.
  8. For reference, background-size is used to specify the size or dimensions in which the image goes to display and background-repeat is used to know about that the background should repeat or not.
  9. 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 and if you want to learn about these topics then you can read our articles on that topics. I hope this tutorial on how to set background image in HTML helps you.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪