कैसे बनाएं: पूरे पृष्ठ के छवि

कैसे CSS के द्वारा पूरे पृष्ठ के पृष्ठभूमि छवि को बनाएं।

पूरे पृष्ठ के छवि

कैसे पूरे ब्राउज़र विंडो को कवर करने वाली पृष्ठभूमि छवि को बनाएं। नीचे दिए गए उदाहरण में पूरे (और आधे) स्क्रीन के रिस्पांसिव पृष्ठभूमि छवि दिखाई देते हैं:

दर्शाना - पूरे पृष्ठ के पृष्ठभूमि छवि

दर्शाना - आधे पृष्ठ के पृष्ठभूमि छवि

पूरे ऊंचाई वाली छवि कैसे बनाएं

एक कंटेनर एलीमेंट का इस्तेमाल करें और उसमें 100% ऊंचाई वाली पृष्ठभूमि छवि जोड़ें。

सूचना:50% का इस्तेमाल करके आधे पृष्ठ के पृष्ठभूमि छवि का निर्माण कर सकते हैं। फिर निम्नलिखित पृष्ठभूमि गुणों का इस्तेमाल करके छवि को सफलता से केंद्रित और आकार दिया जा सकता है:

ध्यान दें:छवि को पूरे स्क्रीन को कवर करने के लिए आपको निम्नलिखित को भी लागू करना होगा: height: 100% साथ-साथ लागू किया जाता है <html> और <body>:

पूरे पृष्ठ के पृष्ठभूमि छवि:

body, html {
  height: 100%;
}
.bg {
  /* इस्तेमाल की गई छवि */
  background-image: url("dancer.jpg");
  /* पूरी ऊंचाई */
  height: 100%;
  /* बेहतरीन तरीके से केंद्रित और छवि को आकार दें */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

अपने आप साबित करें

आधा पृष्ठ पृष्ठभूमि चित्र:}

.bg {
    height: 50%;
}

अपने आप साबित करें