How do you make a picture into a background image of a web page?
Long Answer
Views 737
Answer:
To do this, place a tag code after the tag as follows:
<body background = </div> <!--<img id="thumbnail" src="https://www.rummanansari.com/library/fetchany/question-alert.png" alt="Default Thumbnail">--> </div> </div> <div class="col p-4 mt-4 shadow"> <p><b>Related Articles: </b></p> <div class="col" id="subChapterList"> <!-- Subchapter names will be displayed here --> <div class="spinner-border text-success text-center" role="status" id="loading"> <span class="sr-only"> </span> </div> </div> </div> <div class = "shadow p-3 mt-4" style = "border-radius: 10px;"> <div class='col m-3'><p><i class='fa fa-info-circle'></i> <small>This section is dedicated exclusively to <b>Questions & Answers</b>. For an in-depth exploration of <b><a href='https://www.rummanansari.com/subject/details/44'>HTML 5</a></b>, click the links and dive deeper into this subject.</small></p></div> </div> <div style="text-align:center" class="mt-4"> <a href="#list" class="btn btn-info btn-sm main-gradient-tutorials shadow">Go to Question List</a> </div> <div class="row shadow p-3 mt-4"> <h3>Join Our telegram group to ask Questions </h3> <p> Click below button to join our groups. </p> <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 class="col-lg-5 scrollable"> <span id="list"></span> <ul class="list-group" > <li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><strong>Related Question List</strong></li> <li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="/subject/details/44"><i class="fa fa-code" aria-hidden="true"></i> Explore More Questions</a></li> </ul> <br> <div id = "loadFilteredDataHere" style = "margin: 0px;"> </div> <div class="spinner-border text-success text-center" role="status" id="loadingQuestions"> <span class="sr-only"> </span> </div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7357847575760859" crossorigin="anonymous"></script> <!-- Tutorial Right Side Section B.2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7357847575760859" data-ad-slot="6118219088" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> </div> </div> </section> <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, #638766, #BDD6AE); 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-2 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.rummanansari.com/" class = "text-white">Home</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansarirummanansari.com/about/" class = "text-white">About us</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansari.com/terms-and-conditions/" class = "text-white">Terms of service</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansari.com/about/guest-post" class = "text-white">Guest Post</a></li> <li><i class="bx bx-chevron-right"></i> <a href="hhttps://www.rummanansari.com/about/ads/" class = "text-white">Advertisement</a></li> </ul> </div> <div class="col-lg-2 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.rummanansarirummanansarirummanansari.com/user/" class = "text-white">login</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansari.com/user/" class = "text-white">Sign Up</a></li> </ul> </div> <div class="col-lg-2 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.rummanansari.com/syllabus/java-programming-language/0" class = "text-white">Syllabus</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansari.com/library/java-programming-language" class = "text-white">Subject</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansarirummanansari.com/library/" class = "text-white">Library</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansari.com/gk-and-current-affairs" class = "text-white">GK/MCQ</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansari.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>rummanansari</span></strong>. All Rights Reserved </div> <div class="credits text-center"> Designed by <a href="https://rummanansari.com/" style="color: white">rummanansari.com</a> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- Bootstrap core JavaScript --> <script src="https://rummanansari.com/vendor/jquery/jquery.min.js"></script> <script src="https://rummanansari.com/vendor/bootstrap/js/bootstrap.min.js"></script> <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>--> <!--<script src="https://rummanansari.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> --> <script src="https://rummanansari.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://rummanansari.com/assets/js/owl-carousel.js"></script> <!--<script src="https://rummanansari.com/assets/js/lightbox.js"></script>--> <script src="https://rummanansari.com/assets/js/tabs.js"></script> <!--<script src="https://rummanansari.com/assets/js/video.js"></script>--> <script src="https://rummanansari.com/assets/js/slick-slider.js"></script> <script src="https://rummanansari.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://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></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> <!--it will work as well but its shows menus --> <!-- USING A CDN glightbox start --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" /> <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script> <script> const lightbox = GLightbox({ touchNavigation: true, loop: true, autoplayVideos: true });</script> <!-- USING A CDN glightbox end --> <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> </body> </html> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script> $(document).ready(function () { // alert('Hi'); let question_id = "704"; var page_no = 1; var isrunning = false; var currentJ = 1; loadSubjectQuestionData(); // alert(question_id); fetchSubChapters(question_id); // fetchQuestionData(3); $(window).scroll(function(){ if($(window).scrollTop()+$(window).height() > $(document).height()-1000){ // alert('show -from second call'); if(!isrunning){ loadSubjectQuestionData(); // alert('Log Details'); } } }); $(document).on('click', '.fetch-question', function() { var question_id = $(this).data('question-id'); fetchQuestionData(question_id); updateURL(question_id); // Scroll to top after updating the URL window.scrollTo({ top: 0, behavior: 'smooth' }); // Remove the parent div of the clicked element $(this).closest('.divStyleQuestion').remove(); }); function fetchQuestionData(question_id) { $.ajax({ url: 'https://www.rummanansari.com/app/controllers/QuestionExplanatoryController.php', type: 'POST', data: { functionID: 'fetch_question_data', question_id: question_id }, dataType: 'json', success: function(response) { if (response.error) { alert(response.error); return; } $('#answer').empty(); $('#question-title').html(response.question); $('#breadcrumbs').html(response.breadcrumbs); $('#update-button').html(response.updateButton); $('#question-type').html(response.questionType); $('#view-count').html(`Views <i class="fa fa-eye" style="color: #FFD700"></i> ${response.view_by_people}`); // Update tags let tagsHtml = ''; response.tags.forEach(tag => { tagsHtml += `<span class='badge rounded-pill bg-light text-dark'><small><small>${tag}</small></small></span>`; }); $('#tags').html(tagsHtml); $('#answer').html(response.answer); var imgurl = response.thumbnail ? "https://www.rummanansari.com/library/images-tutorials/" + response.thumbnail : "https://www.rummanansari.com/library/fetchany/question-alert.png"; $('#thumbnail').attr('src', imgurl); fetchSubChapters(question_id); }, error: function() { alert('Failed to fetch data.'); } }); } function updateURL(question_id) { var newURL = '/question/explanatory/' + question_id; history.pushState(null, null, newURL); } function fetchSubChapters(questionId) { // alert('Hi'); $.ajax({ url: "https://www.rummanansari.com/app/controllers/QuestionExplanatoryController.php", type: "POST", data: { question_id: questionId, functionID: "fetch_sub_chapter_list_by_question_id" }, cache: false, success: function(response) { var response = JSON.parse(response); var subChapterList = $('#subChapterList'); // Clear the subChapterList before loading new content subChapterList.empty(); if (response.status === "success" && Array.isArray(response.allSubChapters) && response.allSubChapters.length > 0) { response.allSubChapters.forEach(function(subChapter) { // Create a link for each subChapter var link = $('<a class="badge bg-success m-2 p-2 text-white" href="https://www.rummanansari.com/article/read/' + subChapter.sub_chapter_id + '">' + subChapter.sub_chapter_name + '</a>'); // Append the link to the subChapterList subChapterList.append(link); }); } else { subChapterList.html('<p class="text-muted">No subchapters found.</p>'); } }, error: function(jqXHR, textStatus, errorThrown) { console.error('AJAX Error:', textStatus, errorThrown); // Handle AJAX error, e.g., display an error message to the user } }); } function loadSubjectQuestionData(){ isrunning = true; let functionID = 'loadSubjectQuestionData'; let sub_chapter_id = "2170"; $.ajax({ url: 'https://www.rummanansari.com/library/general-knowledge/ajax/tutorials-ajax-methods.php', method: 'post', data: { functionID: functionID, sub_chapter_id, sub_chapter_id, question_id: question_id, page_no: page_no, currentJ : currentJ }, beforeSend: function() { //$("#loadFilteredDataHere").empty(); $("#loading").show(); }, success: function(response) { $("#loading").hide(); var data = JSON.parse(response); if(data.message == 'success'){ currentJ = data.currentJ; // $("#loadFilteredDataHere").empty(); $('#loadFilteredDataHere').append(data.output); isrunning = false; page_no++; }else if (data.message == 'error'){ $("#loadingQuestions").hide(); isrunning = true; // alert("Do nothing"); } } }); } }); $("a.btn").click(function() { $('html, body').animate({ scrollTop: $("#list").offset().top - 90 // Scroll to 20px from the top of the #list element }, 1000); // Duration of the animation (in milliseconds), adjust as needed for desired speed }); </script>