How do you make a picture into a background image of a web page?
HTML 5 > Introduction to HTML5 > Relation Between HTML and CSS
Short Question
781
Answer:
To do this, place a tag code after the tag as follows:
<body background = </p> <hr> <div style="text-align:center"> <a href="#list" class="btn btn-info btn-sm main-gradient-tutorials">Go to Question List</a> </div> <div class = "shadow p-3 mt-2" style = "border-radius: 10px;"> <div class='col m-3'><p> <i class='fa fa-info-circle'></i> <small>This Particular section is dedicated to <b>Question & Answer</b> only. If you want learn more about <b>HTML 5</b>. Then you can visit below links to get more depth on this subject. </small></p></div><div class='col m-3'><div class="row"> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/syllabus/html-5/2">HTML Syllabus </a> </div> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/tutorial/about-html5-tutorial/2/233">HTML Tutorial </a> </div> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/qanswer/what-is-html-/2/497">HTML Chapter Wise Questions and Answers </a> </div> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/html-forms/2/53">HTML Assignment Chapter Wise </a> </div> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/general-knowledge/100/319">HTML MCQ Chapter Wise </a> </div> </div> <hr></div><hr style='height:3px;border-width:0;color:gray;background-color:gray'> </div> <br> <div class="shadow p-3 mb-5 bg-body rounded"> <a href="/tutorial/about-c-tutorial/1/152" class="btn btn-sm btn-default"># C Tutorials</a> <a href="/tutorial/java/0/0" class="btn btn-sm btn-default"># JAVA Tutorials</a> <a href="/tutorial/about-html5-tutorial/2/233" class="btn btn-sm btn-default"># HTML Tutorials</a> <a href="https://www.atnyla.com/tutorial/about-tutorial/6/395" class="btn btn-sm btn-default"># Computer Fundamental</a> <a href="https://www.atnyla.com/tutorial/about-dsa/3/295" class="btn btn-sm btn-default"># Data Structure</a> <a href="https://www.atnyla.com/tutorial/about-dbms-tutorial/13/713" class="btn btn-sm btn-default"># DBMS Tutorials</a> <a href="https://www.atnyla.com/tutorial/about-sql-tutorial/5/355" class="btn btn-sm btn-default">SQL</a> <a href="https://www.atnyla.com/tutorial/about-c-tutorial/8/468" class="btn btn-sm btn-default"># C# Language</a> <a href="https://www.atnyla.com/tutorial/about-r-tutorial/7/409" class="btn btn-sm btn-default"># R Language</a> <a href="https://www.atnyla.com/tutorial/about-php-tutorial/12/604" class="btn btn-sm btn-default"># PHP</a> <a href="https://www.atnyla.com/tutorial/about-python-tutorial/11/597" class="btn btn-sm btn-default"># Python</a> <a href="https://www.atnyla.com/tutorial/about-vue-js-tutorial/14/765" class="btn btn-sm btn-default"># Vue JS</a> </div> <hr> <h3>Join Our telegram group to ask Questions </h3> <p> Click below button to join our groups. </p> <div class="row"> <div class="col m-2 bg-light shadow btn btn-success"> <a href="https://t.me/atnyla" rel="nofollow" target="_blank"> Ask Question - CSE </a> </div> <div class="col m-2 bg-light shadow btn btn-success"> <a href="https://t.me/ComputerLanguageWithRumman" rel="nofollow" target="_blank"> Programming Language - PDF</a> </div> </div> <br> </div> </div> </div> <div class="col-lg-5"> <ul class="list-group" > <li id="list" class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><strong>Related Program List</strong></li> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/what-happens-if-the-list-style-type-property-is-used-on-a-non-list-element-like-a-paragraph-question/49/705"> <h5 class="mb-1" style="color:#194757;">705. What happens if the list-style-type property is used on a non-list element like a paragraph?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and do not affect the paragraph. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/list-introduction/2/246"> <small># Tutorial: List Introduction</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/49"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: HTML Lists</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/when-is-it-appropriate-to-use-frames-question/47/706"> <h5 class="mb-1" style="color:#194757;">706. When is it appropriate to use frames?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/html-elements/2/237"> <small># Tutorial: HTML Elements</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/what-happens-if-the-number-of-values-in-the-rows-or-cols-attribute-doesn-t-add-up-to-100-percent-question/51/707"> <h5 class="mb-1" style="color:#194757;">707. What happens if the number of values in the rows or cols attribute doesn</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: The browser sizes the frames relative to the total sum of the values. If the cols attribute is set to 100%, 200% the browser displays two vertical frames with the second being twice as big as the first. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/table-elements-and-attributes-part-1/2/254"> <small># Tutorial: Table Elements and Attributes part 1</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/51"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: HTML Table</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/which-browsers-support-html5-question/46/708"> <h5 class="mb-1" style="color:#194757;">708. Which browsers support HTML5?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: The latest versions of Google Chrome, Apple Safari, Mozilla Firefox, and Opera all support most of the HTML5 features. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/introduction-to-html/2/234"> <small># Tutorial: Introduction to HTML</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/46"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Introduction to HTML5</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/name-two-new-tags-included-in-the-html-5-question/47/709"> <h5 class="mb-1" style="color:#194757;">709. Name two new tags included in the HTML 5</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: <Video> and <Audio> are new tags which are included in HTML5 version. They are mainly used as a replacement for Flash, Silverlight, and similar technologies to play multimedia items. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/html-tags/2/240"> <small># Tutorial: HTML Tags</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/do-you-know-which-are-two-semantic-tags-are-included-in-html5-version-question/46/710"> <h5 class="mb-1" style="color:#194757;">710. Do you know which are two semantic tags are included in HTML5 version?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: The <article> and lt;section> tags are two new tags that are included in HTML5. Articles can be composed of multiple sections that can have multiple articles. An article tag represents a full block of content which is a section of a bigger whole. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/introduction-to-html/2/234"> <small># Tutorial: Introduction to HTML</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/46"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Introduction to HTML5</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/what-is-lt-figure-gt-in-html5-question/47/711"> <h5 class="mb-1" style="color:#194757;">711. What is <figure> in HTML5?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: This tag represents a piece of self-contained flow content. It is mostly used as a single unit as a reference to the main flow of the document. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/html-tags/2/240"> <small># Tutorial: HTML Tags</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/what-is-the-use-of-canvas-element-question/47/712"> <h5 class="mb-1" style="color:#194757;">712. What is the use of Canvas element?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: The canvas element helps to build charts, graphs, bypass Photoshop to create 2D images and place them directly into HTML5 code. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/html-tags/2/240"> <small># Tutorial: HTML Tags</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/what-are-the-new-form-elements-which-are-available-in-html5-question/47/713"> <h5 class="mb-1" style="color:#194757;">713. What are the new FORM elements which are available in HTML5?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: <p>The new Form elements in HTML5 offers much better functionality than the earlier versions.</p> <p>The tags given provided to carry out these functions are:</p> <p>1) <datalist> – This tag is used to specify a list of options for input controls.</p> <p>2) <keygen> – This tag represents a key-pair generator field.</p> <p>3) <output> – It represents the result of any scripting calculation.</p> </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/html-tags/2/240"> <small># Tutorial: HTML Tags</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/tell-me-two-benefits-of-html5-web-storage-question/46/714"> <h5 class="mb-1" style="color:#194757;">714. Tell me two benefits of HTML5 Web Storage</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: <p>Two main benefits of HTML5 Web Storage:</p> <ul> <li>It can store up to 10 MB data which is certainly more than what cookies have.</li> <li>Web storage data cannot be transferred with the HTTP request. It helps to increase the performance of the application.</li> </ul> </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/introduction-to-html/2/234"> <small># Tutorial: Introduction to HTML</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/46"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Introduction to HTML5</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="http://www.atnyla.com/overview-of-java-language/0/2"><i class="fa fa-code" aria-hidden="true"></i> Chapterwise Java Program</a></li> <li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="http://www.atnyla.com/fundamentals-of-c-language/1/20"><i class="fa fa-code" aria-hidden="true"></i> Chapterwise C Program</a></li> <li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="http://www.atnyla.com/array/3/54"><i class="fa fa-code" aria-hidden="true"></i> Chapterwise Data Structure Program</a></li> </ul> <br> </div> </div> </div> </div> </div> </div> </div> <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> <style> #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: blue; /* Set a background color */ background-color: transparent; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6); color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ border-radius: 50%; } #myBtn:hover { background-color: #00a7f5; /* Add a dark-grey background on hover */ } </style> <script> // Get the button: let mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera } </script> <footer id="footer" style = "background: linear-gradient(to right, #1a2980, #26d0ce); margin-top: 10px;" class = "text-white p-3"> <div class="footer-top"> <div class="container-fluid"> <div class="row"> <div class="col-lg-2 col-md-6 footer-contact text-white"> </div> <div class="col-lg-3 col-md-6 footer-links text-white"> <p style="font-size: 16px; color: white;">Useful Links</p> <ul> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/" class = "text-white">Home</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/" class = "text-white">About us</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/terms-and-conditions/" class = "text-white">Terms of service</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/guest-post" class = "text-white">Guest Post</a></li> <li><i class="bx bx-chevron-right"></i> <a href="hhttps://www.atnyla.com/about/ads/" class = "text-white">Advertisement</a></li> </ul> </div> <div class="col-lg-3 col-md-6 footer-links text-white"> <p style="font-size: 16px; color: white;">Login</p> <ul> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">login</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">Sign Up</a></li> </ul> </div> <div class="col-lg-3 col-md-6 footer-newsletter"> <p style="font-size: 16px; color: white;">Visit All Home</p> <ul> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/syllabus/java-programming-language/0" class = "text-white">Syllabus</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/java-programming-language" class = "text-white">Subject</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/" class = "text-white">Library</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/gk-and-current-affairs" class = "text-white">GK/MCQ</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/blog/" class = "text-white">Blog</a></li> <!--<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>--> <!--<form action="" method="post">--> <!-- <input type="email" name="email"><input type="submit" value="Subscribe">--> <!--</form>--> </ul> </div> <!--<div class="col-lg-2 col-md-6 footer-newsletter">--> <!-- <p style="font-size: 16px; color: white; ">Social Links</p>--> <!-- <ul> --> <!-- <li> <a href = "https://chat.whatsapp.com/BfdvA6k89H28bD4q4QqiaK" class="text-white"> Join Whatsapp Group <i class="fa-brands fa-whatsapp"> </i> </a></li>--> <!--<li> <a href = "https://t.me/ComputerLanguageWithRumman" class="text-white"> Join Telegram Group <i class="fa-brands fa-telegram"></i> </i> </a></li>--> <!--</ul>--> <!--</div>--> </div> </div> </div> <div class="container d-md-flex text-white"> <div class="social-links text-center text-md-end pt-3 pt-md-0 text-white"> <!--<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>--> <!--<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>--> <!--<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>--> <!--<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>--> <!--<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>--> </div> </div> <div class="me-md-auto text-center text-md-start"> <div class="copyright text-center"> © Copyright <strong><span>atnyla</span></strong>. All Rights Reserved </div> <div class="credits text-center"> Designed by <a href="https://atnyla.com/" style="color: white">atnyla.com</a> </div> </div> </footer> <!-- Scripts --> <!-- Bootstrap core JavaScript --> <script src="https://atnyla.com/vendor/jquery/jquery.min.js"></script> <script src="https://atnyla.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="https://atnyla.com/assets/js/isotope.min.js"></script> <!--<script src=" https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script> --> <script src="https://atnyla.com/assets/js/owl-carousel.js"></script> <!--<script src="https://atnyla.com/assets/js/lightbox.js"></script>--> <script src="https://atnyla.com/assets/js/tabs.js"></script> <!--<script src="https://atnyla.com/assets/js/video.js"></script>--> <!--<script src="https://atnyla.com/assets/js/slick-slider.js"></script>--> <script src="https://atnyla.com/assets/js/custom.js"></script> <!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>--> <!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert"></script>--> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <script> //according to loftblog tut $(".nav li:first").addClass("active"); var showSection = function showSection(section, isAnimate) { var direction = section.replace(/#/, ""), reqSection = $(".section").filter( '[data-section="' + direction + '"]' ), reqSectionPos = reqSection.offset().top - 0; if (isAnimate) { $("body, html").animate( { scrollTop: reqSectionPos, }, 800 ); } else { $("body, html").scrollTop(reqSectionPos); } }; var checkSection = function checkSection() { $(".section").each(function () { var $this = $(this), topEdge = $this.offset().top - 80, bottomEdge = topEdge + $this.height(), wScroll = $(window).scrollTop(); if (topEdge < wScroll && bottomEdge > wScroll) { var currentId = $this.data("section"), reqLink = $("a").filter("[href*=\\#" + currentId + "]"); reqLink .closest("li") .addClass("active") .siblings() .removeClass("active"); } }); }; $(".main-menu, .responsive-menu, .scroll-to-section").on( "click", "a", function (e) { e.preventDefault(); showSection($(this).attr("href"), true); } ); $(window).scroll(function () { checkSection(); }); </script> <script> $(document).ready(function () { $("#side-bar-toogle-btn").click(function () { $("#sidebar-list-group").toggle("slow"); }); }); </script> <script async src="https://fundingchoicesmessages.google.com/i/pub-7357847575760859?ers=1" nonce="P8qLHGFgH5IxNN3G6pLnUA"></script><script nonce="P8qLHGFgH5IxNN3G6pLnUA">(function() {function signalGooglefcPresent() {if (!window.frames['googlefcPresent']) {if (document.body) {const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe);} else {setTimeout(signalGooglefcPresent, 0);}}}signalGooglefcPresent();})();</script> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <script> // prettyPrint(); </script> </body> </html>