कैसे करें - पूरे पृष्ठ की छवि
CSS के साथ एक पूर्ण पृष्ठ पृष्ठभूमि छवि बनाने का तरीका जानें।
पूरे पृष्ठ की छवि
संपूर्ण ब्राउज़र विंडो को कवर करने वाली पृष्ठभूमि छवि बनाने का तरीका जानें। निम्न उदाहरण एक पूर्ण-स्क्रीन (और एक अर्ध-स्क्रीन) प्रतिक्रियाशील पृष्ठभूमि छवि दिखाता है:
डेमो - पूरे पृष्ठ की पृष्ठभूमि छवि
डेमो - आधा पृष्ठ पृष्ठभूमि छवि
कैसे एक पूर्ण ऊंचाई छवि बनाने के लिए
कंटेनर तत्व का उपयोग करें और कंटेनर में पृष्ठभूमि छवि जोड़ें height: 100%
।
युक्ति: आधे पृष्ठ की पृष्ठभूमि छवि बनाने के लिए 50% का उपयोग करें। फिर निम्न पृष्ठभूमि गुणों का उपयोग छवि को पूरी तरह से केंद्र और स्केल करने के लिए करें:
नोट: यह सुनिश्चित करने के लिए कि छवि पूरी स्क्रीन को कवर करती है, आपको height: 100%
<html> और <body> दोनों पर भी आवेदन करना होगा:
उदाहरण
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
आधा पृष्ठ पृष्ठभूमि छवि:
उदाहरण
.bg {
height: 50%;
}