Featuring a stunning background image beneath the navigation bar

I'm having trouble getting a full-sized background image to display below my navigation bar. Currently, it's only partially covering the background image.

I attempted to follow this guide on Adding a background image just below the navigation bar but it didn't make any difference for me.

My CSS code is as follows:

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;
}

The navigation bar is located within the body of my HTML code:

<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>

Can someone please assist me in figuring out what I might be overlooking here?

Answer №1

Instead of setting your background-image for the body and having it covered by the navbar, consider setting it for a new div:

You can customize the background-position, background-size, etc. based on your requirements. For more information, check out this helpful link.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure consistent element heights within adjacent columns using CSS

My template looks like this: https://i.sstatic.net/hoLzR.jpg I am trying to keep the same height between each item in both columns, where the height is determined by the tallest item in each column when they are placed side by side. But on smaller screen ...

Why is it that every time I write this code, the localhost gets redirected and a message pops up saying

<?php include("connect.php"); if(isset($_POST['submit'])) { $qonax=@$_POST['qonax']; $subject=@$_POST['subject']; $insert="INSERT INTO subject(ID,Qonax,Subject)VALUES('','$qonax', ...

Guidance on initiating an Ajax script automatically when an HTML page is loaded

Is there a way to execute myfile.php first in myfile.html upon loading using an ajax script without the use of include and require functions? If so, how can this be done? ...

Expanding section beneath a Row in a Table (Semantic UI React)

I'm attempting to implement expandable Table Rows in a Table that can be activated by clicking on them individually. For instance, upon clicking on the designated area in the provided image below, a Segment or Container will reveal itself with embedd ...

Exploring the Power of Title and the Wildcard Universal Selector in JavaScript CSS/HTML5

What is the method for adding a title to the div below? document.write('<div style="width:auto; margin:10px;"><table style="background-color:purple;" border="1" cellspacing="1" cellpadding="35">') The script in its entirety can be ...

Direct users to a particular tab on another webpage

Seeking assistance - my goal is to display a particular tab using a link from a different page. An illustration can be found [here]. The destination page contains the bulk of the code - Note that the tabs are functioning effectively as they are, I simply ...

Tips for creating a static header div with a fixed size and a scrollable body

Check out the code snippet below as a reference: <div class="main"> <div class="header"> Header<br> Header<br> Header<br> Header<br> Header<br> Header<br> Header<br> Header<br> Header<br> He ...

I am currently developing a custom alert box component in Angular 9. While trying to modify the alert type, I have encountered an issue where the appropriate CSS class is not being assigned

I'm currently working on Angular 9 and facing an issue while trying to create a reusable alert component. The problem lies in the alert-box selector where setting the alert type does not change its appearance. Instead, only plain text is displayed wit ...

Enhancing Email Design with PHPMailer and CSS Styles

My PHPMailer setup for automatically sending an order acknowledgement as an HTML formatted email is mostly working, but the formatting of the acknowledgement isn't quite right. I tried including my style sheet using the 'AddAttachment' line, ...

Enhance the appearance of your printed pages by incorporating borders with the help of wkhtml

Is there a way to print a square border on each page of a multi-page PDF rendered using wkhtmltopdf, similar to the question asked here: Add borders to each printed page with CSS? I generate an HTML page as a variable and utilize snappy from https://githu ...

The functionality of toggling Jquery with the datepicker is malfunctioning

I am in the process of creating a calendar input field that includes a datepicker for each input box. HTML <select id="select"> <option value="Type">Type</option> <option value="Range">Range</option> <option val ...

Unable to Embed Tweets resulting in 403 Error (Forbidden)

While working on embedding some Tweets on my webpage, I encountered the following error message: GET https://cdn.api.twitter.com/1/friendships/exists.json?user_a=19463349&screen_name_b=mrland_news&callback=twttr.setFriendshipExists 403 (Forbidden) ...

Is it possible to invoke a JavaScript function from within a CSS file?

Currently, I am focusing on developing responsive web design and looking for ways to avoid creating multiple versions of each page based on screen width variations. The struggle lies in managing font sizes effectively. While attempting to style them using ...

Parallax enchantment with CSS clip masking

I'm trying to apply a clip mask to an image in order to prevent it from overlapping with its background, but I'm not exactly sure how to achieve this. I attempted using the background-clip property with box/padding values, however, it did not pro ...

Navigating with React JS Bar

App.js import NewsSec from "./News/NewsSec"; import ScoreSec from "./ScoreSec/ScoreSec"; import Menu from "./Sidebar/Menu"; import "./styles.css"; import { GiHamburgerMenu } from "react-icons/gi"; import Re ...

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

Achieving a Collapsible Top Navigation with Additional Selection in Bootstrap 4

Adding a new section above the current <nav>. This is what I hope will occur. https://i.sstatic.net/HBaYN.png Below is my code: https://jsfiddle.net/rLc588mu/ Appreciate your assistance! ...

running a for loop for multiple onclick events

I have a situation where I need to create an onclick event that performs multiple tasks. There is a button labeled Add Item in the image below. When clicked, it should add the HTML code shown below: var addItemHTML = '<tr class="hold-item&quo ...

How can I make my opacity change on hover without the need for JavaScript?

I've been attempting to design a book cover that will become fully visible when hovered over, but for some reason it's not working #book_cover { display: block; margin-left: auto; margin-right: auto; width: 25%; height: 71%; ...

Ajax Bookmarking: retrieve accurate webpage

I have successfully used Ajax to dynamically update my webpage by loading content without having to refresh the entire page. However, I am facing an issue where when reloading the page or bookmarking it, only the profile.php content is displayed instead of ...