All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Put Background Image In HTML

Last Updated : Mar 11, 2024

How To Put Background Image In HTML

In this tutorial we will show you how to put background image in HTML, in HTML, sometimes we find that most of website use the images as their website background that looks to attractive. The example of this is like TESLA CAR website.

They use the images as their background that’s too much impressive. With this the today’s designer come into a problem that how they able to insert an image in background. So, today our topics is about background images in html.

Step By Step Guide On How To Put Background Image In HTML :-

As, there are many ways to set an image in background, but we will teach you the simplest way to do this.

With this method you are able to both inline, internal and external CSS. Here, we will provide you an example in so that you understand how to do this.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body  style="background-image: url(img.jpg);">
		<div>
		    this is division
		</div>

		</body>
      </html>
  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. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now, there are many ways to image as background, here we use inline css.
  5. We want to say that you can apply background color to any element in html, but for example we hare apply to only body, you can also apply to elements like div, p and headings also.
  6. For this you have to first create a style attribute and then background image inside this, after this you have to type url with two braces like url(), the braces used are curly and images must be downloaded.
  7. Now, just you have to give source in between the braces like path of the image with the name of image with its extensions like jpeg, jpg, png, etc. For use of background image in another tag, you have to follow the same steps.
  8. The last thing is that, you can also use internal, inline and external CSS as which you want to use.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that we can use the any image as background in html without blank or white color.

It is creative way to do make a webpage more creative and effective. But there are also properties like background repeat and background size etc. that you must have to write in these tags.

These topics will be covered in our next sessions. I hope this tutorial on how to put background image in HTML helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪