जैसा कि मैं खुद को सीएसएस से परिचित कर रहा हूं, मुझे लगा कि मेरे पास ये छवियां नियंत्रण में हैं, लेकिन जाहिर तौर पर मैं नहीं करता। मेरे पास एक खंड के लिए एक बीजी छवि है और मुझे बटन और क्या नहीं के साथ इसे सही ढंग से स्थिति में लाने के लिए छवि को चारों ओर ले जाना पड़ा है, लेकिन मैंने देखा है कि यह अब पूरे पृष्ठ को चौड़ा कर रहा है।
अब तक, मैंने समाधान के एक समूह की कोशिश की है, यहां पर लोगों ने पूछा है, मैंने मूल कंटेनर के लिए अधिकतम चौड़ाई निर्धारित करने का प्रयास किया है, मैंने अतिप्रवाह को छिपाने की कोशिश की है, लेकिन मुझे कुछ याद आ रहा है। मैंने निरीक्षक के साथ देखा कि छवि भी अगले भाग में रेंग रही है।
header{
max-width:100%;
}
#hero-bg {
position: absolute;
background: url("https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") center center no-repeat;
padding-top: 200px;
padding-left: 60px;
width: 100%;
height: 100vh;
z-index: -1;
overflow-x:hidden;
}<header>
<!-- Header BG Image -->
<div id="hero-bg"></div>
<!-- Logo & Nav -->
<div class="content-wrapper">
<div id="nav-bar">
<div id="logo"><img src="./img/logo.png" alt="" /></div>
<div id="mobile-nav">
<div></div>
<div></div>
<div></div>
</div>
<ul id="main-nav">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li><a href="''" class="btn">LOREM</a></li>
</ul>
</div>
<!-- Hero Content -->
<div id="hero-showcase">
<h1 class="hero-head">Lorem Ipsum</h1>
<p class="hero-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga,
dolore enim ab, fugit natus rerum eveniet delectus consectetur
asperiores iusto accusantium modi recusandae. Incidunt autem iusto
aut dolores reprehenderit corrupti vitae quae? Similique ratione
alias aliquid nesciunt quidem quisquam porro!
</p>
<a href="#section1" class="info-btn btn">LOREM</a>
</div>
</div>
</header>1 उत्तर
position:absolute आपकी छवि को उसके relative पैरेंट के सापेक्ष स्थित बनाता है। तो अगर आप इसे शामिल करना चाहते हैं तो आपको माता-पिता position:relative बनाना होगा। और फिर आप मूल तत्व में overflow:hidden जोड़ सकते हैं। (अतिप्रवाह केवल अपने सभी बच्चों को छुपाता है जो फैलते हैं, इसलिए छवि के लिए अतिप्रवाह का उपयोग करने का कोई फायदा नहीं है)।
मैंने आपके उदाहरण में एक प्लेसहोल्डर छवि जोड़ी है ताकि आप देख सकें कि छवियां कंटेनर के अंत से आगे नहीं जाती हैं।
header{
max-width:100%;
position: relative;
overflow: hidden;
}
#hero-bg {
position: absolute;
background: url("http://via.placeholder.com/1000x1000") center center no-repeat;
padding-top: 200px;
padding-left: 60px;
width: 100%;
height: 100vh;
z-index: -1;
overflow-x:hidden;
}<header>
<!-- Header BG Image -->
<div id="hero-bg"></div>
<!-- Logo & Nav -->
<div class="content-wrapper">
<div id="nav-bar">
<div id="logo"><img src="./img/logo.png" alt="" /></div>
<div id="mobile-nav">
<div></div>
<div></div>
<div></div>
</div>
<ul id="main-nav">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li><a href="''" class="btn">LOREM</a></li>
</ul>
</div>
<!-- Hero Content -->
<div id="hero-showcase">
<h1 class="hero-head">Lorem Ipsum</h1>
<p class="hero-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga,
dolore enim ab, fugit natus rerum eveniet delectus consectetur
asperiores iusto accusantium modi recusandae. Incidunt autem iusto
aut dolores reprehenderit corrupti vitae quae? Similique ratione
alias aliquid nesciunt quidem quisquam porro!
</p>
<a href="#section1" class="info-btn btn">LOREM</a>
</div>
</div>
</header>