Difficulty displaying background image within a div element

My code doesn't seem to be showing up correctly in the Chrome Inspector. I must have made a mistake somewhere, but I can't figure out what.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS & Favicon -->
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <link rel="stylesheet" href="css/stylesheet.css">
    <!-- scripts -->
</head>
<body>
  <div class="wrapper">
    <header>
      <div id=="container header_div">
        &nbsp;
      </div>
    </header>
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Here is my CSS:

body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
    background-image: url(../images/header_background.jpg);
    background-position: center;
    background-size: cover;
}

I have included all necessary background properties in the CSS and ensured that the div has a proper size.

This is the structure of my files: https://i.sstatic.net/vTyNk.png

htmlcssbackgroundshow

Answer №1

After my thorough analysis, I have identified several potential causes for the issue at hand:

  1. A critical mistake lies in having a double equal sign in the code snippet: 
    <div id=="container header_div">
    . The correct form should use a single equal sign instead of two. Moreover, using spaces to separate words within an ID is not permissible as IDs cannot be chained like classes. To rectify this syntax error, ensure that the id attribute is simply defined as id = "header_div".
  2. Another problem arises from the relative path to the image starting with two dots, causing a deviation from the current directory. Since the images folder resides within the same directory as page.html, it is essential to adjust the filepath to read as follows: url(/images/header_background.jpg);
  3. In order to display the image properly, it is imperative to specify the height within the #header_div element.

Implementing these corrections enabled me to successfully visualize a background image during testing. I trust that this guidance proves to be beneficial in resolving the issue.

Answer №2

The 

<div id="container header_div">
does not exist in your CSS. Please change it to <div id="header_div"> 
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
    background-image: url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
    background-position: center;
    background-size: cover;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS & Favicon -->
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <link rel="stylesheet" href="css/stylesheet.css">
    <!-- scripts -->
</head>
<body>
  <div class="wrapper">
    <header>
      <div id="header_div">
        &nbsp;
      </div>
    </header>
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Answer №3

Once upon a time, I encountered a problem just like this. Here's how I solved it: I simply assigned the div background to 

background: url("./images/header_background.jpg");

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

Sliding and repositioning elements using jQuery

My goal is to build a simple slideshow for learning purposes. I want the list items to slide automatically to the left in a continuous loop. I've written some code that makes the slides move, but I'm struggling to set the correct position for ea ...

javascriptjqueryhtmlcss

Trouble arises when trying to define the style for an element generated through the Document

I'm having trouble setting the style for a 'tr' element created using DOM within JavaScript. Here's the code snippet: var tr = document.createElement("tr"); tr.onmouseover=function(){this.style.backgroundColor='#fbf9e0';}; ...

javascripthtmldom

How to Ensure Button and Text Box are the Same Width on Mobile Using Bootstrap?

When viewing on larger screens, the button aligns with the text box in the same line. However, on smaller screens when zoomed in, I want the button to appear below the text box while maintaining the same width. I've been struggling to make it work pro ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to adjust the scrolling speed of a background image to be slower than the rest of

I'm searching for an example similar to this: Are there any efficient javascript solutions available? I've had difficulty implementing the code I've come across so far. ...

javascripthtmlcss

Ensuring the header of the table is working properly and implementing a scrollable feature for the

Currently, I am facing a design issue in my Angular Project that I need help with. I am attempting to achieve a scrolling effect on the body of a table while keeping the header fixed. Although I have tried to implement this feature, I have been unsuccess ...

htmlcssangularhtml-table

Emulate Bootstrap's Focus Style CSS

Is there a way to use JQuery to apply Bootstrap's blue highlight to text fields in a form that are not currently in focus, even if there are multiple inputs? ...

jquerycsstwitter-bootstrap

Unlocking the Power of Combining JMVC and Server-side MVC Models

It's been a few days since I posted this question here and still no response. I also tried posting it on forum.javascriptMVC.com and finally got an answer, but I'm looking for more insights. Here's my question: After reading the documentat ...

javascriptphpajaxhtmljavascriptmvc

Refine the query data using the variable extracted from the value input in the HTML

Suppose I have the following input in my HTML code: <input value="0001" name="call" id="call"> How can I retrieve that value in a PHP script without submitting it, for example using an event like onBlur? The PHP file has a query similar to this: ...

phpjqueryhtml

Determining the Minimum and Maximum Widths of a Div Container Using CSS

I have created a basic grid structure with several rows and columns. The top row spans the entire width, the second and third rows each contain two columns, and the bottom row also spans the entire width. Currently, all elements are fixed at specific size ...

htmlcss

Retrieve information from a SQL database table and present the output in an HTML table format

I am trying to display the result of a query to a remote ODBC SQL database in an HTML table using PHP. I have successfully established the connection with the database, but when I attempt to execute a query and display it in a table, nothing appears. I am ...

phphtmlmysqlodbc

What is the best way to retrieve the true CSS property value of an HTML element node?

My understanding of the getComputedStyles() method is that it returns an object enabling access to the actual CSS property values of an HTML element node. I decided to test this concept by creating a simple example with a paragraph that contains a span: ...

javascripthtmlcssgetcomputedstyle

Employing onChange for updating the count of table rows

Is it possible to incorporate an onChange event into the following code? This way, the table rows can be counted each time there is an update in the number of visible rows. The requirement is to have checkboxes that show/hide rows and the row count needs ...

javascriptjqueryhtml

Circular arrow button encased by a trio of line breaks

I'm in the process of creating a multi step form, and I am looking to incorporate a unique round arrow button surrounded by three steps (representing the number of pages) with each step changing color once it has been completed. While horizontal step ...

htmlcssreactjsmaterial-uistepper

passing a PHP variable through an HTML form

I've been tasked with modifying a website that I didn't originally create and don't have full access to (I can add HTML scripts but not much more). My current objective is to integrate a form that will send data to a third-party servlet. Wi ...

phphtmlforms

The art of styling <li> elements compared to <a> elements

While these inquiries may lean towards being subjective, I am interested in learning about the industry's generally accepted best practices: 1) With responsive design and collapsible menus becoming more common, should a nav or nav menu element be sty ...

htmlcssnavigation

Is Object Cloning the Solution for Creating Multiple Views in THREE.js with Multiple Canvasses? Considerations to Keep in Mind

While seeking advice on object picking from small three.js viewport, I learned a technique for mouse-picking objects from a smaller canvas. Now, I am looking to showcase N different views of the same scene while still being able to perform object picking. ...

javascripthtmlcanvasthree.js

"Troubleshooting problems with the display:none property in a media

Encountering a small dilemma with media queries within my HTML. One of the sections in my code contains the following: <div class="header-left"> </div> <div class="header-center"> <ul> <li class="end"> ...

htmlcssmedia

The z-index property does not seem to function properly when used in conjunction

I am experiencing an issue with the z-indexes of two divs: one with default positioning and the other with a fixed position. No matter how I adjust the z-index values, it appears impossible to make the fixed-positioned element go behind the statically pos ...

cssz-index

Excessive content in Bootstrap Table

I am currently facing an issue with two tables placed side by side using the Bootstrap grid system. While the tables are dynamic and visually appealing, I encounter a problem when adding lengthy strings dynamically. The overflow of text within the table ca ...

htmlcsshtml-tableoverflowbootstrap-4

What is the best way to transform this into a dropdown menu using HTML, CSS, and SCSS?

I am currently in the process of developing a dropdown menu using HTML, CSS, and SCSS. Any assistance would be greatly appreciated. <nav> <div class="nav-container"> <div class="nav-logo"> <a href=&quo ...

htmlcsssassdrop-down-menunavbar