The background isn't appearing, leaving all divs exposed

I have attempted to encapsulate everything with <div class="bg-wrapper">, but I am encountering issues with making it cover and display the background across all the elements within the wrapper.

.bg-wrapper {
  background-image: url('img/bg-background-jpg');
  width: 100%;
  background-size: cover;
  height: auto;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header class="bg-wrapper">
  <div class="container">
    <nav class="navbar navbar-expand-lg">
      <a class="navbar-brand" href="#">LOGO</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="nav navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Portfolio</a>
          </li>
        </ul>

      </div>
    </nav>
  </div>
  <div class="jumbotron">
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          <img src="img/phone.png" />
        </div>
        <div class="col-md-7">
          <h1 class="display-4">I CAN DO ALL</h1>
          <h3>THINGS NOW</h3>

          <h4>Your love is a squery button ok with that?</h4>
          <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Sign Up Today</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</header>

Furthermore, in my CSS file, I am attempting to wrap the navigation and jumbotron with a background image, but encountering difficulty:

Do you have any suggestions on how I can resolve this issue? It is crucial for me to incorporate an image background for the entire content.

Answer №1

Check out a functional codepen example

CSS:

.bg-wrapper{
  background-image: url('https://picsum.photos/1920/300');
  width: 100%;
  background-size: cover;
  height: auto;
  border: 1px solid red;
}

HTML:

<header class="bg-wrapper">
    <div class="container">
        <nav class="navbar navbar-expand-lg">
            <a class="navbar-brand" href="#">LOGO</a>
            ... (HTML content continues)
        </nav>
    </div>
</header>

It seems like the problem might be related to the image link. Ensure that your link is correctly formatted as 100% absolute.

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

Is there a way to show escaped html code on the blog editing page?

After developing a Content Management System (CMS), I encountered an issue with code formatting in my blog posts. <pre> <code> &lt;input type=&quot;color&quot; name=&quot;favcolor&quot; /&gt; </code> < ...

What is the best way to retain selection while clicking on another item using jQuery?

There is a specific issue I am facing with text selection on the page. When I apply this code snippet, the selected text does not get de-selected even after clicking .container: jQuery('.container').on("mousedown", function(){ jQuery('. ...

Unexpected vertical line in MUI5 Stepper appears when invoking from a function

Greetings! I'm currently working on developing a MUI5 vertical stepper, but I've encountered an issue when rendering steps from a function. Specifically, there is an extra connector line appearing on top of the first step. If you'd like to ...

Stylish Pop-up Box appears hidden behind a different element

Is there a way to fix the issue of the FancyBox plugin being blocked by some part of the HTML on the page when trying to load a Vimeo movie into a popup? Here is the live link: click here : it's when you click on the slider image underneath the yello ...

Please refrain from altering the color of my flag on hover

I am working with a table that has rows marked with flags. Below is the CSS I have used: <table class="hovered no-border" data-url="@Url.Action("General", "Transport")"> <tbody> <tr> <td><input type="che ...

The Angular HTML Autocomplete feature is not functioning as intended when hosted on a CDN in Chrome, despite setting it to "nope" or "off"

When setting Autocomplete to "nope" or "off" in my input box for surname, I'm still able to select from the autocomplete list. This issue occurs when accessing our Ui app through CDN at link [https:// Xyz. net], but works correctly when accessing it d ...

Is there any benefit to making the SVG elements width and height 100%?

The Angular Material documentation app features an SVG Viewer that is able to scale the SVG content to fit the container using the following function: inlineSvgContent(template) { this.elementRef.nativeElement.innerHTML = template; if (this.sca ...

Ways to align a nested list vertically

There are two nested lists: <ul> <li>First item <ul> <li> <a href="#">some item</a> </li> <li> <a href="#">some item</a> <</li& ...

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

Hey there all you wise folks! So here's the deal - I'm a PHP/JavaScript wizard when it comes to logic and server-side stuff, but I really suck at design, CSS, and all things arty. Does anyone have any recommendations for a template or tool that ...

Adjust font size using jQuery

Hey there! I have a small question. I want to resize all HTML elements using jQuery, but the current code allows me to increase and decrease the size infinitely. var originalSize = $('html').css('font-size'); // Reset ...

Having trouble with setting CSS style in <p> tags within Codeigniter framework

Why is the class mentioned in the p tag not applying in Chrome but working in IE and Firefox? <p class="p_error"><?php print $this->validation->errorValue;?></p> Here is the CSS -> .p_error{ color:red; text-align:left; font-s ...

Choose the desired options to add to the selection box

Here is a question that I have: <select class="myselect"> <option value="option 1">option 1</option> <option value="option 2">option 2</option> <option value="option 3">option 3</option> <option value="option 4 ...

Tips for resolving an issue with an overflowing Uber React-Vis multicolor bar chart

I am trying to create a multi-colored bar chart using Uber's react-vis library. However, I am encountering an issue where the leftmost bar of the chart is overflowing below the YAxis instead of remaining contained to the right of it. You can view the ...

Align text in the middle using CSS

I want to apply the following css styles #header { color: #333; width: 900px; float: left; padding: 10px; border: 1px solid #ccc; height: 150px; margin: 10px 0px 5px 0px; background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%); } With ...

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

Guide on creating an accessible table with rows that can be selected

Managing accessibility in a web application can be challenging, especially when dealing with features like selecting multiple rows using checkboxes. In my current project, I have a view that displays a list of items and allows users to select multiple rows ...

What is the best way to restrict a link to only a specific div element and not a Bootstrap

My HTML conundrum involves a div styled with the class .win_box: This particular div is nested within a Bootstrap column, and the link associated with it extends throughout the entirety of said column. However, I want to restrict user access to this link ...

Tips for implementing validation in JavaScript

I'm brand new to learning Javascript. Recently, I created a template for a login page and it's working perfectly fine. However, I am struggling with setting up validation and navigation. My goal is to redirect the user to another page if their us ...

Inner Content Attribute Reveals the Markup within a Text

Hello, I am in the process of developing a simple CMS that generates blogs. The user is required to enter the blog content themselves, and I am allowing them to do so using the TinyMCE editor. I save this content in a database where the data type for the ...

Mastering Instagram Automation: Techniques for Navigating the Lightbox with Selenium

I am in the process of developing a Python script that assists users in Instagram engagement groups by efficiently liking everyone's photo during each round. I am facing an issue where Selenium is unable to click on the first photo when I reach a user ...