मैं अपने नेविगेशन बार के नीचे एक पूर्ण आकार की पृष्ठभूमि छवि जोड़ने की कोशिश कर रहा हूं। अभी यह आंशिक रूप से मेरी पृष्ठभूमि छवि को कवर कर रहा है।

मैंने इसका उपयोग करने का प्रयास किया नेविगेशन बार के ठीक नीचे एक पृष्ठभूमि छवि जोड़ना< /a> लेकिन इसने मेरे लिए कुछ भी नहीं बदला।

अभी मेरा कोड इस तरह है (सीएसएस):

body {
    margin: 0;
    background: #353535;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;

    background-image: url(imageabc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

मेरा नेविगेशन बार मेरे HTML कोड में भी है:

<body>

    <header>
        <div class="container">
            <img src="imagebcd.png" alt="logo" class="logo"> <!-- logo image src -->

            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </header>

</body>

क्या कोई कृपया मुझे यह पहचानने में मदद कर सकता है कि मैं यहाँ क्या खो रहा हूँ?

1
CBCH 13 जिंदा 2020, 17:36

1 उत्तर

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

यदि आप अपने background-image को body के लिए सेट करते हैं तो यह navbar द्वारा कवर किया जाएगा क्योंकि नावबार body का हिस्सा है। बस अपना background-image एक नए div के लिए सेट करें:

पुनश्च: आप अपनी आवश्यकताओं के अनुसार background-position, background-size, आदि की सेटिंग के साथ खेल सकते हैं। यहाँ एक अच्छा लिंक है।

body {
    margin: 0;
    background: #353535;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;

}

.full-size-img {
    background-image: url("https://via.placeholder.com/1150");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}
        <header>
            <div class="container">
                <img src="imagebcd.png" alt="logo" class="logo"> <!-- logo image src -->
    
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div class="full-size-img">

        </div>
0
sina_r 13 जिंदा 2020, 14:52