✏️ Explanatory Question
<body background = </div> </section> <!-- Thumbnail image --> <!-- Bottom Prev/Next repeat --> <div class="eq-nav-bar" style="margin-top:8px;"> <a class="eq-nav-link" href="/question/703"> <span class="eq-nav-dir">← Previous</span> <span class="eq-nav-q-text">What happens if you open the external CSS file in a browser?</span> </a> <div class="eq-nav-placeholder">No next question</div> </div> </div><!-- /col-lg-8 --> <!-- ═══════════════════════════════════ SIDEBAR ═══════════════════════════════════ --> <div class="col-lg-4"> <aside class="eq-sidebar-wrap"> <!-- Topic info --> <div class="eq-topic-card"> <div class="eq-topic-header">📌 Topic Information</div> <div class="eq-topic-body"> <div class="eq-topic-row"> <span class="eq-topic-label">Subject</span> <a href="/subject/details/44" class="eq-topic-link"> HTML 5 </a> </div> <div class="eq-topic-row"> <span class="eq-topic-label">Chapter</span> <span class="eq-topic-val">Introduction to HTML5</span> </div> <div class="eq-topic-row"> <span class="eq-topic-label">Sub-Chapter</span> <span class="eq-topic-val">Relation Between HTML and CSS</span> </div> <div class="eq-topic-row"> <span class="eq-topic-label">Type</span> <span class="eq-topic-val">Short Answer</span> </div> <div class="eq-topic-row"> <span class="eq-topic-label">Published</span> <span class="eq-topic-val">09 Apr 2020</span> </div> </div> </div> <!-- Related questions --> <div class="eq-sidebar-card"> <div class="eq-sidebar-header"> <h3>Related Questions</h3> <div class="eq-sidebar-subtitle"> More questions from the same topic. </div> </div> <div class="eq-related-list"> <a class="eq-related-item" href="/question/702"> <div class="eq-related-num">1</div> <div class="eq-related-text"> Can several selectors with class names be grouped together? </div> </a> <a class="eq-related-item" href="/question/703"> <div class="eq-related-num">2</div> <div class="eq-related-text"> What happens if you open the external CSS file in a browser? </div> </a> </div> </div> </aside> </div> </div> </div> </div> <!-- Image modal --> <div id="eqImageModal" style="display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.80);backdrop-filter:blur(10px);align-items:center;justify-content:center;cursor:zoom-out;" onclick="eqCloseImageModal()"> <img id="eqModalImg" src="" alt="" style="max-width:92vw;max-height:92vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:contain;cursor:default;" onclick="event.stopPropagation()"> <button onclick="eqCloseImageModal()" style="position:fixed;top:18px;right:22px;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-size:20px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button> </div> <style> footer.site-footer, footer.site-footer a, footer.site-footer li, footer.site-footer p, footer.site-footer span, footer.site-footer h5, .navbar .dropdown-menu, .navbar .dropdown-menu a, .navbar .dropdown-menu li, .navbar .dropdown-menu p { color: var(--text-color) !important; background-color: var(--header-footer-bg) !important; } footer.site-footer a:hover, .navbar .dropdown-menu a:hover { color: var(--link-hover-color) !important; } footer.site-footer hr { border-color: var(--shadow-color) !important; } footer.site-footer i { color: var(--text-color) !important; } footer.site-footer i:hover { color: var(--link-hover-color) !important; } .site-footer { padding: 48px 24px 24px; margin-top: 40px; border-top: 1px solid var(--border-color); } .site-footer .footer-inner { width: 100%; max-width: 100%; margin: 0; } .site-footer .footer-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .site-footer h5 { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; } .site-footer p, .site-footer li, .site-footer a { font-size: 0.98rem; line-height: 1.7; text-decoration: none; } .site-footer ul { padding-left: 0; margin-bottom: 0; list-style: none; } .site-footer .social-links a { display: inline-flex; align-items: center; justify-content: center; margin-right: 14px; font-size: 1rem; } .site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; margin-top: 28px; border-top: 1px solid var(--shadow-color); } .site-footer .footer-bottom-links a { margin-left: 18px; } .site-footer .footer-bottom-links a:first-child { margin-left: 0; } @media (max-width: 991.98px) { .site-footer { padding: 36px 16px 20px; } .site-footer .footer-top { grid-template-columns: 1fr; gap: 24px; } .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; } .site-footer .footer-bottom-links a { margin-left: 0; margin-right: 16px; } } </style> <footer class="site-footer"> <div class="footer-inner"> <div class="footer-top"> <div> <h3>About RummanAnsari</h3> <p>Your go-to platform for online courses, GK, blogs, and learning resources.</p> </div> <div> <h3>Quick Links</h3> <ul> <li><a href="/">Home</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="https://www.rummanansari.com/course?course_type=paid">Topic</a></li> <li><a href="/course">Courses</a></li> </ul> </div> <div> <h3>Courses</h3> <ul> <li><a href="https://www.rummanansari.com/course?course_type=free">Free Courses</a></li> <li><a href="https://www.rummanansari.com/course?course_type=paid">Paid Courses</a></li> </ul> <h3 class="mt-4">Connect with Us</h3> <div class="social-links"> <a href="https://www.facebook.com/merummanansari/" aria-label="Facebook Profile"><i class="fab fa-facebook-f"></i></a> <a href="https://x.com/merummanansari" aria-label="Twitter Profile"><i class="fab fa-twitter"></i></a> <a href="https://www.linkedin.com/in/rummanansari/" aria-label="LinkedIn Profile"><i class="fab fa-linkedin-in"></i></a> <a href="https://www.instagram.com/instra.ansari/" aria-label="Instagram Profile"><i class="fab fa-instagram"></i></a> </div> </div> </div> <div class="footer-bottom"> <p class="mb-0">© 2026 RummanAnsari. All rights reserved.</p> <div class="footer-bottom-links"> <a href="/about/">About</a> <a href="/about/privacy-policy/">Privacy</a> <a href="/about/terms-and-conditions/">Terms</a> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <!--<script src="/assets/js/new-scripts.js"></script>--> <!-- below two for editor--> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { const body = document.body; const toggleBtn = document.getElementById('sidebarToggleBtn'); const closeBtn = document.getElementById('closeSidebarBtn'); const overlay = document.getElementById('sidebarOverlay'); const mobileBreakpoint = 992; function isMobile() { return window.innerWidth < mobileBreakpoint; } function applySidebarState() { const saved = localStorage.getItem('sidebarCollapsed'); if (isMobile()) { body.classList.remove('sidebar-collapsed'); body.classList.remove('sidebar-mobile-open'); } else { body.classList.remove('sidebar-mobile-open'); if (saved === 'true') { body.classList.add('sidebar-collapsed'); } else { body.classList.remove('sidebar-collapsed'); } } } if (toggleBtn) { toggleBtn.addEventListener('click', function () { if (isMobile()) { body.classList.toggle('sidebar-mobile-open'); } else { body.classList.toggle('sidebar-collapsed'); localStorage.setItem( 'sidebarCollapsed', body.classList.contains('sidebar-collapsed') ? 'true' : 'false' ); } }); } if (closeBtn) { closeBtn.addEventListener('click', function () { body.classList.remove('sidebar-mobile-open'); }); } if (overlay) { overlay.addEventListener('click', function () { body.classList.remove('sidebar-mobile-open'); }); } window.addEventListener('resize', applySidebarState); applySidebarState(); }); document.addEventListener('DOMContentLoaded', function () { const body = document.body; const themeButtons = document.querySelectorAll('[data-theme-button]'); }); </script> <script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js"; import { getAuth, GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js"; const firebaseConfig = { apiKey: "AIzaSyCNteyUk6yYXnx275jqn09fGPtjpnir5pY", authDomain: "rummanansari-01.firebaseapp.com", projectId: "rummanansari-01", storageBucket: "rummanansari-01.firebasestorage.app", messagingSenderId: "958581859518", appId: "1:958581859518:web:ea2b17c10640eb8747eaef" }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const provider = new GoogleAuthProvider(); const googleLoginButtons = document.querySelectorAll('.googleLoginBtn'); googleLoginButtons.forEach(function (googleLoginBtn) { googleLoginBtn.addEventListener('click', async function () { try { const result = await signInWithPopup(auth, provider); const user = result.user; const response = await fetch('/login/google', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: user.email || '', first_name: user.displayName ? user.displayName.split(' ')[0] : '', last_name: user.displayName ? user.displayName.split(' ').slice(1).join(' ') : '', profile_image: user.photoURL || '', google_uid: user.uid }) }); const rawText = await response.text(); console.log('Server response:', rawText); let data; try { data = JSON.parse(rawText); } catch (e) { alert('Server is not returning valid JSON. Check console.'); return; } if (data.status === 'success') { window.location.href = data.redirect || '/dashboard'; } else { alert(data.message || 'Google login failed.'); } } catch (error) { console.error('Google login error:', error); alert(error.message || 'Unable to login with Google.'); } }); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/php.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/csharp.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/sql.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/java.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('.article-content pre code').forEach(function (block) { if (window.hljs) { hljs.highlightElement(block); } }); }); </script> </body> </html> <!-- highlight.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/java.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/php.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/sql.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/csharp.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script> <script> /* ─── Reading progress ─── */ (function () { const bar = document.getElementById('eqReadingBar'); const pct = document.getElementById('eqReadPct'); const ans = document.getElementById('eqAnswerSection'); function update() { const docH = document.documentElement.scrollHeight - window.innerHeight; const scrolled = docH > 0 ? (window.scrollY / docH * 100) : 0; if (bar) bar.style.width = scrolled + '%'; if (pct && ans) { const rect = ans.getBoundingClientRect(); const read = Math.min(100, Math.max(0, Math.round((-rect.top / ans.offsetHeight) * 100))); pct.textContent = read + '%'; } } window.addEventListener('scroll', update, { passive: true }); update(); })(); /* ─── Share ─── */ function shareQuestion() { const shareData = { title: "How do you make a picture into a background image of a web page?", text: 'Check out this question and detailed explanation.', url: window.location.href }; if (navigator.share) { navigator.share(shareData).catch(() => {}); } else { navigator.clipboard.writeText(window.location.href); alert('Link copied to clipboard!'); } } /* ─── Image modal ─── */ function eqOpenImageModal(src, alt) { const modal = document.getElementById('eqImageModal'); document.getElementById('eqModalImg').src = src; document.getElementById('eqModalImg').alt = alt || ''; modal.style.display = 'flex'; document.body.style.overflow = 'hidden'; } function eqCloseImageModal() { document.getElementById('eqImageModal').style.display = 'none'; document.body.style.overflow = ''; } document.addEventListener('keydown', function (e) { if (e.key === 'Escape') eqCloseImageModal(); }); /* ─── highlight.js — runs after scripts load ─── */ document.addEventListener('DOMContentLoaded', function () { if (window.hljs) { document.querySelectorAll('.eq-answer-body pre code').forEach(function (block) { block.removeAttribute('data-highlighted'); hljs.highlightElement(block); }); } /* ─── MathJax typeset scoped to answer ─── */ const answerEl = document.getElementById('eqAnswerSection'); if (!answerEl) return; if (window.MathJax) { if (window.MathJax.typesetPromise) { MathJax.typesetPromise([answerEl]).catch(console.error); } else if (window.MathJax.typeset) { MathJax.typeset([answerEl]); } } }); </script>