In this method there are two following steps:<\/p>\n
a. Using the Background attribute<\/strong>:<\/h3>\n\n- Open the existing HTML file in the text editor in which we want to use the background attribute or we have to type the Html code in any text editor.<\/li>\n
- In HTML document move the cursor within the\u00a0starting <body><\/strong><\/a> tag <\/strong>And, then type the\u00a0background<\/strong> attribute <\/strong>as shown in the following block.<\/li>\n
- While we have to add image just, we want to create path.<\/li>\n
- We have to save the HTML code or HTML file in the text editor.<\/li>\n<\/ul>\n
For example,<\/strong><\/p>\n <\/div> <!doctype Html>Output :<\/strong><\/p>\n![\"\"](\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/html-background-images.png\")
<\/p>\n
<\/p>\n
b. Using internal style sheet<\/strong><\/h3>\n\n- Open the existing HTML file in the text editor in which we want to use the background attribute or we have to type the Html code in any text editor.<\/li>\n
- In HTML document we have to place the cursor in the\u00a0head<\/a> tag<\/strong> and define the starting and closing tag of the\u00a0<style> <\/strong><\/a>tag as shown in the following block.<\/li>\n
- In style tag, we have to type the element body and, then type the\u00a0background-image<\/strong><\/li>\n
- In text editor, we have to save the Html code and run the code.<\/li>\n
- we will see the image specified in the html document as a background of the web page, after execution.<\/li>\n<\/ul>\n
For example,<\/strong><\/p>\n <\/div> <!DOCTYPE html>Output:<\/strong><\/p>\n![\"\"](\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/how-to-add-background-image-in-html.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"
We can easily add the background Image in the Html document which is to be displayed on a web page in HTML. In this method there are two following steps: a. Using the Background attribute: Open the existing HTML file in the text editor in which we want to use the background attribute or we […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[17079],"tags":[17270,17273,17275,17268,17271,17272,17274,17267,17269],"class_list":["post-4325","post","type-post","status-publish","format-standard","hentry","category-web-designing","tag-background-image-css","tag-how-do-i-put-an-image-at-the-background-of-my-website","tag-how-to-add-an-image-background-image-in-html","tag-how-to-add-an-image-as-background-image-of-a-web-page","tag-how-to-add-background-image-in-html","tag-how-to-implement-a-background-image-in-html","tag-how-to-set-a-background-image-in-html","tag-how-to-set-background-image-of-a-webpage","tag-html-background-images"],"yoast_head":"\n
How to set background image of a webpage ? - HTML Background Images<\/title>\n<meta name=\"description\" content=\"How to set background image of a webpage ? - We can easily add the background Image in the Html document which is to be displayed on a web page.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to set background image of a webpage ? - HTML Background Images\" \/>\n<meta property=\"og:description\" content=\"How to set background image of a webpage ? - We can easily add the background Image in the Html document which is to be displayed on a web page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-06T06:06:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/html-background-images.png\" \/>\n<meta name=\"author\" content=\"webmaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/\",\"name\":\"How to set background image of a webpage ? - HTML Background Images\",\"isPartOf\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/html-background-images.png\",\"datePublished\":\"2022-05-06T06:06:12+00:00\",\"dateModified\":\"2022-05-06T06:06:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4\"},\"description\":\"How to set background image of a webpage ? - We can easily add the background Image in the Html document which is to be displayed on a web page.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/#primaryimage\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/html-background-images.png\",\"contentUrl\":\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/html-background-images.png\",\"width\":1273,\"height\":886},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"caption\":\"webmaster\"},\"sameAs\":[\"https:\/\/www.wikitechy.com\/interview-questions\"],\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to set background image of a webpage ? - HTML Background Images","description":"How to set background image of a webpage ? - We can easily add the background Image in the Html document which is to be displayed on a web page.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/","og_locale":"en_US","og_type":"article","og_title":"How to set background image of a webpage ? - HTML Background Images","og_description":"How to set background image of a webpage ? - We can easily add the background Image in the Html document which is to be displayed on a web page.","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/","og_site_name":"Wikitechy","article_published_time":"2022-05-06T06:06:12+00:00","og_image":[{"url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/html-background-images.png"}],"author":"webmaster","twitter_card":"summary_large_image","twitter_misc":{"Written by":"webmaster","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/","name":"How to set background image of a webpage ? - HTML Background Images","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/#primaryimage"},"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/html-background-images.png","datePublished":"2022-05-06T06:06:12+00:00","dateModified":"2022-05-06T06:06:12+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"description":"How to set background image of a webpage ? - We can easily add the background Image in the Html document which is to be displayed on a web page.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/how-to-set-background-image-of-a-webpage\/#primaryimage","url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/html-background-images.png","contentUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/html-background-images.png","width":1273,"height":886},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4","name":"webmaster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","caption":"webmaster"},"sameAs":["https:\/\/www.wikitechy.com\/interview-questions"],"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=4325"}],"version-history":[{"count":1,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4325\/revisions"}],"predecessor-version":[{"id":4328,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4325\/revisions\/4328"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=4325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=4325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=4325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
For example,<\/strong><\/p>\n Output :<\/strong><\/p>\n <\/p>\n For example,<\/strong><\/p>\n Output:<\/strong><\/p>\n We can easily add the background Image in the Html document which is to be displayed on a web page in HTML. In this method there are two following steps: a. Using the Background attribute: Open the existing HTML file in the text editor in which we want to use the background attribute or we […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[17079],"tags":[17270,17273,17275,17268,17271,17272,17274,17267,17269],"class_list":["post-4325","post","type-post","status-publish","format-standard","hentry","category-web-designing","tag-background-image-css","tag-how-do-i-put-an-image-at-the-background-of-my-website","tag-how-to-add-an-image-background-image-in-html","tag-how-to-add-an-image-as-background-image-of-a-web-page","tag-how-to-add-background-image-in-html","tag-how-to-implement-a-background-image-in-html","tag-how-to-set-a-background-image-in-html","tag-how-to-set-background-image-of-a-webpage","tag-html-background-images"],"yoast_head":"\n<!doctype Html><\/p>\nb. Using internal style sheet<\/strong><\/h3>\n
\n
<!DOCTYPE html><\/p>\n","protected":false},"excerpt":{"rendered":"