मैं एक HTML पृष्ठ पर पृष्ठभूमि जोड़ने का प्रयास कर रहा हूं जिसमें पंक्तियों वाला एक कंटेनर है। मैंने निम्नलिखित लिंक से पंक्तियों की शैली ली और इसे थोड़ा संपादित किया (उदाहरण के लिए बनाम कोड में scss से css तक) - लिंक

enter image description here

उनके उदाहरण में, कोई पृष्ठभूमि नहीं है, लेकिन जब मैं पृष्ठभूमि जोड़ता हूं तो ऐसा लगता है कि किसी कारण से इसे दाईं ओर स्थानांतरित कर दिया गया है और यह स्क्रीन को नीचे (सफेद नीचे अनुभाग) में नहीं भरता है। यह पंक्तियों पर भी देखा जा सकता है कि किसी कारण से यह बाईं ओर एक बड़ा मार्जिन प्रदर्शित करता है जबकि मूल कोड में ऐसा नहीं होता है।

यहां छवि विवरण दर्ज करें कोई विचार ऐसा क्यों होता है?

मैं इसे करने के लिए निम्नलिखित कोड का उपयोग करता हूं:

पायथन + फ्लास्क:

from flask import Flask, url_for, render_template
from urllib.request import urlopen
from reading_data import read_hiscore
import json

app = Flask(__name__)

headings = ("name", "role", "salary")

data = (
    ("a", "aa", "55", 6),
    ("b", "bb", "60", 6),
    ("c", "cc", "65", 6),
    ("a", "aa", "55", 6),
    ("b", "bb", "60", 6),
    ("c", "cc", "65", 6),
)

@app.route("/")
def hello_world():
    return render_template("layout.html", headings=headings, data=data)

एचटीएमएल:

<!DOCTYPE html>
<html>

<head>
  <title>Flask app</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

<body>
  <div class="container">
    <h2>Responsive Tables Using LI <small>Triggers on 767px</small></h2>
    <ul class="responsive-table">
      <li class="table-header">
        <div class="col col-1">Job Id</div>
        <div class="col col-2">Customer Name</div>
        <div class="col col-3">Amount Due</div>
        <div class="col col-4">Payment Status</div>
      </li>
      {% for row in data %}
      <li class="table-row">
        {% for cell in row %}
        <div class="col col-1"> {{ cell }}</div>
        {% endfor %}
      </li>
      {% endfor %}
    </ul>
  </div>
</body>

</html>

सीएसएस:

body {
  font-family: "lato", sans-serif;
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  min-height: 100%;
  min-width: 100%;
}

h2 {
  font-size: 26px;
  text-align: center;
  color: white;
}

h2 small {
  font-size: 0.5em;
  color: white;
}

.responsive-table li {
  border-radius: 16px;
  padding: 30px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.responsive-table .table-header {
  background-color: blue;
  color: white;
  font-size: 14px;
  font-weight: bold;
  flex-basis: 25%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.responsive-table .table-row {
  background: blue;
  color: white;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}

.responsive-table .col-1 {
  flex-basis: 25%;
  text-align: center;
}

.responsive-table .col-2 {
  flex-basis: 25%;
}

.responsive-table .col-3 {
  flex-basis: 25%;
}

.responsive-table .col-4 {
  flex-basis: 25%;
}

@media all and (max-width: 100%) {
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
  }
  .responsive-table .col {
    display: flex;
    padding: 10px 0;
  }
  .responsive-table .col:before {
    color: #6C7A89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}
1
Ben 5 सितंबर 2021, 10:13

3 जवाब

सबसे बढ़िया उत्तर

छवि को पूर्ण ऊंचाई तक विस्तारित करने के लिए, आपको css html, body टैग जोड़ने और min-height: 100% सेट करने की आवश्यकता है। फिर बॉडी . में गुण जोड़ें

html,
body {
  min-height: 100%;
}
body {
  font-family: 'lato', sans-serif;
  background-image: url('https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
html,
body {
  min-height: 100%;
}

body {
  font-family: 'lato', sans-serif;
  background-image: url('https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

h2 {
  font-size: 26px;
  margin: 20px 0;
  text-align: center;
}

h2 small {
  font-size: 0.5em;
}

li {
  border-radius: 3px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.table-header {
  background-color: #95a5a6;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table-row {
  background-color: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}

.col-1 {
  flex-basis: 10%;
}

.col-2 {
  flex-basis: 40%;
}

.col-3 {
  flex-basis: 25%;
}

.col-4 {
  flex-basis: 25%;
}

@media all and (max-width: 767px) {
  .table-header {
    display: none;
  }
  li {
    display: block;
  }
  .col {
    flex-basis: 100%;
  }
  .col {
    display: flex;
    padding: 10px 0;
  }
  .col:before {
    color: #6c7a89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}
<div class="container">
  <h2>Responsive Tables Using LI <small>Triggers on 767px</small></h2>
  <ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Job Id</div>
      <div class="col col-2">Customer Name</div>
      <div class="col col-3">Amount Due</div>
      <div class="col col-4">Payment Status</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42235</div>
      <div class="col col-2" data-label="Customer Name">John Doe</div>
      <div class="col col-3" data-label="Amount">$350</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42442</div>
      <div class="col col-2" data-label="Customer Name">Jennifer Smith</div>
      <div class="col col-3" data-label="Amount">$220</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42257</div>
      <div class="col col-2" data-label="Customer Name">John Smith</div>
      <div class="col col-3" data-label="Amount">$341</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42311</div>
      <div class="col col-2" data-label="Customer Name">John Carpenter</div>
      <div class="col col-3" data-label="Amount">$115</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
  </ul>
</div>
1
ЖнецЪ 5 सितंबर 2021, 09:17

आपकी क्वेरी को हल करने के लिए, background-image संपत्ति आम तौर पर इसके साथ अन्य गुण लेती है, ताकि अतिव्यापी तत्वों के संबंध में इसका वांछित स्थान प्राप्त किया जा सके। जैसे background-size, background-repeat या background-position आदि। यदि आप चाहें तो छवि को केंद्र में रखने के लिए background-size और background-position को प्रतिशत मान देने का प्रयास करें।

 body {
     font-family: "lato", sans-serif;
     background-image: url('./background.jpg');
     background-repeat: no-repeat;
     background-size: 140% 100%;
     background-position: 70% 100% ;
     width:100vw;
     height:100vh;
     overflow:hidden;
 }

साथ ही आपके शरीर और html को ऊंचाई और चौड़ाई नहीं दी गई है। तो, सफेद स्थान बनाया जाता है क्योंकि छवि की ऊंचाई वहीं समाप्त होती है।

0
Shriyacodes 5 सितंबर 2021, 07:35

शरीर से पृष्ठभूमि संपत्ति को हटा दें और इसे कंटेनर में pr0perties में जोड़ें और कंटेनर वर्ग से न्यूनतम-चौड़ाई न्यूनतम-ऊंचाई गुणों को हटा दें।

.container{
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
padding-right: 0px;

}

0
Samarth Motka 5 सितंबर 2021, 07:40