The issue of the background image not displaying correctly within a Bootstrap container arises

I'm having trouble adding a background image to my website using Bootstrap 4 and external CSS (internal CSS isn't working for me either).

I want the background image to be behind all rows in a container, not just behind one specific row.

Could someone help me with this, please?

.background {
    background-image: url('images/background.png') !important;
    height: 100%;
}

#top_part {
    /*background-color: #ff9900  !important;*/
}
<div class="container-fluid background" >
  <div class="row" id='top_part'>
    <div class="col-6" >

      <div class="d-flex text-center justify-content-center align-items-baseline">
        <h1>sample text<br/>sample text</h1>
      </div>
      <div class="d-flex justify-content-center">
        <button type="button" class="btn btn-primary"><h4></h4></button>
      </div>
    </div>
    
    <div class="col-6">
      <img class="img-fluid" src="images/box.png" alt="">
    </div>
  </div>
  
  <div class="row" id='top_part'>
    <div class="col-12 text-center">
      <h2>sample text</h2>
    </div>
  </div>


  <div class="row" id='top_part'>
    <div class="col-4">
      <div class="d-flex justify-content-center" id='lock_gear_heart'>
        <img src="images/lock80px.png" alt="">
      </div>
      <div class="d-flex justify-content-center" id='text_lock'>
        <h5>sample text</h5>
      </div>
    </div>

    <div class="col-4">
      <div class="d-flex justify-content-center" id='lock_gear_heart'>
        <img src="images/gears80px.png" alt="">
      </div>
      <div class="d-flex justify-content-center" id='text_lock'>
        <h5>sample text</h5>
      </div>
    </div>

    <div class="col-4">
      <div class="d-flex justify-content-center" id='lock_gear_heart'>
        <img src="images/heart80px.png" alt="">
      </div>
      <div class="d-flex justify-content-center" id='text_lock'>
        <h5>sample text</h5>
      </div>
    </div>

  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It appears that your code has successfully worked on my end.

Take a look at this JSFiddle I put together with some sample images. You can easily swap out my placeholders with your own. Your code effectively positions the image behind the container containing all the rows.

If you prefer the image to be positioned behind everything on the entire page, consider updating your CSS like so:

body {
    background-image: url('images/podklad.png') !important;
    background-size: cover;  /* Adjusts the image size to cover the full container */
}

If the image is not displaying, double-check that the image paths in your code are accurate.

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

Embedding images using a blob or base64 format does not function properly on iOS devices

I'm facing an issue with setting the src of an img tag to display an image. The code snippet below works fine on android, mac, and windows, but it is not functioning correctly on iOS: let base64Image = pageModel.image; this.$currentPageImage.src = `da ...

javascripthtmltypescriptwebkit

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

Beginner: Bootstrap Sass 3.3.6 - Incorporating Javascript - Issue with Navbar Dropdown Not Expanding application.html.erb Head: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> ...

javascriptcssruby-on-railstwitter-bootstrapsass

Tips for integrating CSS3 into Android WebView

Currently, I am working on an Android application that utilizes HTML5. My goal is to implement element rotation using CSS3 transformations. However, I need to ensure that the app remains compatible with Android 2.3. What would be the most effective metho ...

androidhtmlcsswebviewtransformation

What steps can I take to ensure that my popup images continue to appear?

Currently, I am working on creating a webpage that features thumbnails sourced from a local geoserver. The goal is to have these thumbnails expand into dialog windows that can be moved around. While I have successfully implemented the functionality to expa ...

javascriptjqueryhtmlxslt

Utilizing Javascript to Connect with Java Web API

I'm seeking assistance with transferring a file from a browser to another device connected to a server-operated machine. I am relatively new to web application and back-end programming. The current code allows for moving a file from the server to the ...

javascripthtmlangularjs

Can you explain the owlItem feature found in owl carousel?

Does anyone have an idea about this? .data("owlItem") How can I find this in jQuery or the console log? I don't think this is a data attribute. .data("owlItem") .data("owlItem") $("#slider_thumb").on("click", ".owl-item", function(e){ ...

jqueryhtmlowl-carousel

Inconsistency in css asset URLs across various pages discovered while working with Rails

When using assets stylesheet to load a CSS file, I noticed that it only loads on the index page. Upon inspecting with F12, the console shows the URL for other pages as well, which appends "/cloths" to the asset path. I am currently utilizing the default la ...

htmlcssruby-on-rails-4sass

Crystal report for VS2010 displays scrollbars on the page

I like to present my report in a div container with overflow:scroll I have placed the crystal report viewer inside the DIV and expect it to stay within the div only, which it does. The div shows scroll bars when the report overflows. However, my page als ...

cssvisual-studio-2010crystal-reports

Adjusting print page size according to the class of a specific element using CSS

I am currently working on a single page application and I have the need to print the page with either landscape or portrait orientation based on the class of a specific div element. The challenge is that I want to achieve this using only CSS and without an ...

htmlcss

My website layout got messed up because of Chrome version 48

Once upon a time, I created a website. Despite its outdated design, it has been functioning properly. Even though I know it's time for something new, I've hesitated to make any changes because it still works. Surprisingly, parts of the page layo ...

htmlcssgoogle-chrome

Horizontal SWF's are providing spaces of white in between them

I'm struggling with removing the white space between SWFs on my HTML page. I've tried using 'block' in CSS, but it's not working for a horizontal layout. Adding "0" for the border hasn't helped either. I'm getting frustr ...

htmlcssflashactionscript-3

Style sheets for two dynamically-sized boxes side by side

There are two boxes or columns positioned on the same line. Both have varying widths that need to remain on the same row. To clarify: .----------container 570px-----------. |[box1] [box2]| Ideal scenario | ...

htmlcss

Ensuring that the most recent accordion added remains open and dynamic

I am attempting to dynamically add Bootstrap accordions by clicking on the ADD button. Each time the button is clicked, I want a new accordion to be generated while closing any previous ones. I am having trouble understanding how to use Bootstrap methods a ...

jquerytwitter-bootstrapbootstrap-4

What is the best way to create a line break at the maximum width point?

I am currently working on a code that dynamically receives variables and concatenates them with an underscore: var text = product + "_" + someOtherInfo; After combining the variables, I need to display this text inside a div element. div { max-width ...

jquerycss

Issue with unordered list in the footer overlapping other elements

I've been struggling to resolve an issue with my footer for quite some time now. The problem seems to be arising from my unordered list being set to float right, causing it to overflow the parent div. Could someone please shed light on what I might b ...

csslistfooteroverlappingunordered

Is it possible to apply a gradient to a table row in Internet Explorer?

Whenever I hover over a specific table row in my table, I want the background to transition to a linear gradient. The CSS code is pretty simple: tbody.row-links tr:hover { background: ...standard multi-browser linear gradient code... color: #333C3 ...

htmlinternet-explorerhovercss

Styling div elements within other div elements using CSS

I am currently working on creating a layout with three divs, each containing an image. The challenge is to set the height of the first div (top) to 10% of the screen size, the second (middle) to 60%, and the third (bottom) to 30%. I want these divs to main ...

htmlcss

Make sure to incorporate the Readme.md file into your HTML document

I am currently managing a static HTML page on my personal server. The README.md file for this project is stored in a public GitHub repository. My goal is to have the contents of the ReadMe automatically included on my local HTML page. Essentially, I am lo ...

htmlgithub

Step-by-step guide on generating a fluid list with Express and HTML

Looking to create a dynamic list by fetching data from a JSON file. I want the list items to redirect me to specific content based on their IDs when clicked. However, my current approach is not working as expected, and the list needs to be truly dynamic. ...

javascripthtmlnode.jsexpress

Discover additional and subtract options

I am trying to implement a "See more" and "See less" button functionality for my list items inside an unordered list using the code below, but it is not working as intended. $(document).ready(function() { var list = $(".partners__ul li"); var numTo ...

javascriptjqueryhtml